

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=dark>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/icon/dw.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Memory">
  <meta name="keywords" content="">
  
    <meta name="description" content="Memory 伙伴匹配的开发基本流程">
<meta property="og:type" content="article">
<meta property="og:title" content="Memory 伙伴匹配系统-开发文档">
<meta property="og:url" content="http://example.com/2023/03/24/Memory%20%E4%BC%99%E4%BC%B4%E5%8C%B9%E9%85%8D%E7%B3%BB%E7%BB%9F-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/index.html">
<meta property="og:site_name" content="Memory&#39;s blog">
<meta property="og:description" content="Memory 伙伴匹配的开发基本流程">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/artical/house4.jpg">
<meta property="article:published_time" content="2023-03-24T04:13:32.000Z">
<meta property="article:modified_time" content="2023-09-20T15:45:43.000Z">
<meta property="article:author" content="Memory">
<meta property="article:tag" content="项目">
<meta property="article:tag" content="开发经验">
<meta property="article:tag" content="Redis">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="http://example.com/img/artical/house4.jpg">
  
  
  
  <title>Memory 伙伴匹配系统-开发文档 - Memory&#39;s blog</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.4","typing":{"enable":true,"typeSpeed":100,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  

  

  

  

  

  

  

  



  
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 75vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Memory&#39;s blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                <span>友链</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/newBG/girl.jpg') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="Memory 伙伴匹配系统-开发文档"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        Memory
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-03-24 12:13" pubdate>
          2023年3月24日 中午
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          171k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          428 分钟
        
      </span>
    

    
    
      
        <span id="leancloud-page-views-container" class="post-meta" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="leancloud-page-views"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar category-bar" style="margin-right: -1rem">
    





<div class="category-list">
  
  
    
    
    
    <div class="category row nomargin-x">
      <a class="category-item 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="Redis"
        id="heading-e111446745a1825b862f8727ae63bce4" role="tab" data-toggle="collapse" href="#collapse-e111446745a1825b862f8727ae63bce4"
        aria-expanded="true"
      >
        Redis
        <span class="list-group-count">(3)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-e111446745a1825b862f8727ae63bce4"
           role="tabpanel" aria-labelledby="heading-e111446745a1825b862f8727ae63bce4">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem collapsed
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="经验"
        id="heading-32a8e000e928e6dc255876d9fc0178b3" role="tab" data-toggle="collapse" href="#collapse-32a8e000e928e6dc255876d9fc0178b3"
        aria-expanded="false"
      >
        经验
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse " id="collapse-32a8e000e928e6dc255876d9fc0178b3"
           role="tabpanel" aria-labelledby="heading-32a8e000e928e6dc255876d9fc0178b3">
        
        
          
  <div class="category-post-list">
    
    
      
      
        <a href="/2023/10/24/Redis%20%E9%A3%8E%E6%9A%B4%EF%BC%9A%E4%BB%8E%E5%8E%9F%E7%90%86%E5%88%B0%E5%BA%94%E7%94%A8%EF%BC%8C%E4%B8%80%E6%8E%A2%E5%86%85%E5%AD%98%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%A5%A5%E7%A7%98/" title="Redis 风暴：从原理到应用，一探内存中的数据奥秘"
           class="list-group-item list-group-item-action
           ">
          <span class="category-post">Redis 风暴：从原理到应用，一探内存中的数据奥秘</span>
        </a>
      
    
  </div>

        
      </div>
    </div>
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="项目"
        id="heading-31ecc0e65b4cd3e6b12577382bb56d6a" role="tab" data-toggle="collapse" href="#collapse-31ecc0e65b4cd3e6b12577382bb56d6a"
        aria-expanded="true"
      >
        项目
        <span class="list-group-count">(2)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-31ecc0e65b4cd3e6b12577382bb56d6a"
           role="tabpanel" aria-labelledby="heading-31ecc0e65b4cd3e6b12577382bb56d6a">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="开发经验"
        id="heading-bfd19ce0478d81a44ceb5a9a1aa94202" role="tab" data-toggle="collapse" href="#collapse-bfd19ce0478d81a44ceb5a9a1aa94202"
        aria-expanded="true"
      >
        开发经验
        <span class="list-group-count">(2)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-bfd19ce0478d81a44ceb5a9a1aa94202"
           role="tabpanel" aria-labelledby="heading-bfd19ce0478d81a44ceb5a9a1aa94202">
        
        
          
  <div class="category-post-list">
    
    
      
      
        <a href="/2023/03/24/Memory%20%E4%BC%99%E4%BC%B4%E5%8C%B9%E9%85%8D%E7%B3%BB%E7%BB%9F-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/" title="Memory 伙伴匹配系统-开发文档"
           class="list-group-item list-group-item-action
           active">
          <span class="category-post">Memory 伙伴匹配系统-开发文档</span>
        </a>
      
    
      
      
        <a href="/2023/07/11/MemoryAPI%20%E5%BF%86%E6%B1%87%E5%BB%8A-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/" title="MemoryAPI 忆汇廊-开发文档"
           class="list-group-item list-group-item-action
           ">
          <span class="category-post">MemoryAPI 忆汇廊-开发文档</span>
        </a>
      
    
  </div>

        
      </div>
    </div>
  
        
      </div>
    </div>
  
        
      </div>
    </div>
  
</div>


  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Memory 伙伴匹配系统-开发文档</h1>
            
              <p class="note note-success">
                
                  
                    本文最后更新于：8 个月前
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <h1 id="前端项目初始化"><a href="#前端项目初始化" class="headerlink" title="前端项目初始化"></a>前端项目初始化</h1><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs markdown">Vue 3 开发框架（提高页面开发的效率）<br><br>Vant UI（基于 Vue 的移动端组件库）（React 版 Zent）<br><br>Vite 2（打包工具，快！）<br><br>Nginx 来单机部署<br></code></pre></td></tr></table></figure>

<ul>
<li><h4 id="使用vite快速搭建一个项目-跟着文档操作就好了"><a href="#使用vite快速搭建一个项目-跟着文档操作就好了" class="headerlink" title="使用vite快速搭建一个项目(跟着文档操作就好了)"></a>使用vite快速搭建一个项目(跟着文档操作就好了)</h4></li>
<li><h5 id="在指定目录下执行该命令-初始化项目"><a href="#在指定目录下执行该命令-初始化项目" class="headerlink" title="在指定目录下执行该命令, 初始化项目"></a>在指定目录下执行该命令, 初始化项目</h5></li>
</ul>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs c">yarn create vite<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="package-json下的文件"><a href="#package-json下的文件" class="headerlink" title="package.json下的文件"></a>package.json下的文件</h5></li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-punctuation">&#123;</span><br>  <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;partnermatch&quot;</span><span class="hljs-punctuation">,</span><br>  <span class="hljs-attr">&quot;private&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">true</span></span><span class="hljs-punctuation">,</span><br>  <span class="hljs-attr">&quot;version&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;0.0.0&quot;</span><span class="hljs-punctuation">,</span><br>  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;module&quot;</span><span class="hljs-punctuation">,</span><br>  <span class="hljs-attr">&quot;scripts&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">&#123;</span><br>    <span class="hljs-attr">&quot;dev&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;vite&quot;</span><span class="hljs-punctuation">,</span><br>    <span class="hljs-attr">&quot;build&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;vue-tsc &amp;&amp; vite build&quot;</span><span class="hljs-punctuation">,</span><br>    <span class="hljs-attr">&quot;preview&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;vite preview&quot;</span><br>  <span class="hljs-punctuation">&#125;</span><span class="hljs-punctuation">,</span><br>  <span class="hljs-attr">&quot;dependencies&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">&#123;</span><br>    <span class="hljs-attr">&quot;vant&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^4.1.1&quot;</span><span class="hljs-punctuation">,</span><br>    <span class="hljs-attr">&quot;vue&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^3.2.47&quot;</span><br>  <span class="hljs-punctuation">&#125;</span><span class="hljs-punctuation">,</span><br>  <span class="hljs-attr">&quot;devDependencies&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">&#123;</span><br>    <span class="hljs-attr">&quot;@vitejs/plugin-vue&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^4.1.0&quot;</span><span class="hljs-punctuation">,</span><br>    <span class="hljs-attr">&quot;typescript&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^4.9.3&quot;</span><span class="hljs-punctuation">,</span><br>    <span class="hljs-attr">&quot;unplugin-vue-components&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^0.24.1&quot;</span><span class="hljs-punctuation">,</span><br>    <span class="hljs-attr">&quot;vite&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^4.2.0&quot;</span><span class="hljs-punctuation">,</span><br>    <span class="hljs-attr">&quot;vue-tsc&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^1.2.0&quot;</span><br>  <span class="hljs-punctuation">&#125;</span><br><span class="hljs-punctuation">&#125;</span><br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="index-html"><a href="#index-html" class="headerlink" title="index.html"></a>index.html</h5></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span> /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;image/svg+xml&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;/vite.svg&quot;</span> /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Vite + Vue + TS<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/src/main.ts&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="main-js"><a href="#main-js" class="headerlink" title="main.js"></a>main.js</h5></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123; createApp &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-string">&quot;./style.css&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;<br><br><span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>);<br>app.<span class="hljs-title function_">mount</span>(<span class="hljs-string">&quot;#app&quot;</span>);<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="App-vue"><a href="#App-vue" class="headerlink" title="App.vue"></a>App.vue</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;script setup lang=&quot;ts&quot;&gt;<br>import HelloWorld from &quot;./components/HelloWorld.vue&quot;;<br>&lt;/script&gt;<br><br>&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;a href=&quot;https://vitejs.dev&quot; target=&quot;_blank&quot;&gt;<br>      &lt;img src=&quot;/vite.svg&quot; class=&quot;logo&quot; alt=&quot;Vite logo&quot; /&gt;<br>    &lt;/a&gt;<br>    &lt;a href=&quot;https://vuejs.org/&quot; target=&quot;_blank&quot;&gt;<br>      &lt;img src=&quot;./assets/vue.svg&quot; class=&quot;logo vue&quot; alt=&quot;Vue logo&quot; /&gt;<br>    &lt;/a&gt;<br>  &lt;/div&gt;<br>  &lt;HelloWorld msg=&quot;Vite + Vue&quot; /&gt;<br><br>  &lt;van-button type=&quot;primary&quot; /&gt;<br>&lt;/template&gt;<br><br>&lt;style scoped&gt;<br>.logo &#123;<br>  height: 6em;<br>  padding: 1.5em;<br>  will-change: filter;<br>  transition: filter 300ms;<br>&#125;<br>.logo:hover &#123;<br>  filter: drop-shadow(0 0 2em #646cffaa);<br>&#125;<br>.logo.vue:hover &#123;<br>  filter: drop-shadow(0 0 2em #42b883aa);<br>&#125;<br>&lt;/style&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h5></li>
</ul>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="启动项目"><a href="#启动项目" class="headerlink" title="启动项目"></a>启动项目</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> dev<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="项目正常启动-接下来就是引入组件-开发我们自己的页面了-详见官方文档"><a href="#项目正常启动-接下来就是引入组件-开发我们自己的页面了-详见官方文档" class="headerlink" title="项目正常启动, 接下来就是引入组件, 开发我们自己的页面了(详见官方文档)"></a>项目正常启动, 接下来就是引入组件, 开发我们自己的页面了(详见官方文档)</h5></li>
</ul>
<ul>
<li><h5 id="安装最新版vant"><a href="#安装最新版vant" class="headerlink" title="安装最新版vant"></a>安装最新版vant</h5></li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> i vant<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="引入vant组件-这里我们使用按需引入的方法"><a href="#引入vant组件-这里我们使用按需引入的方法" class="headerlink" title="引入vant组件(这里我们使用按需引入的方法)"></a>引入vant组件(这里我们使用按需引入的方法)</h5></li>
</ul>
<ul>
<li><h5 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs routeros"><span class="hljs-comment"># 通过 yarn 安装</span><br>yarn <span class="hljs-built_in">add</span> unplugin-vue-components -D<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="配置插件"><a href="#配置插件" class="headerlink" title="配置插件"></a>配置插件</h5></li>
</ul>
<ul>
<li><h5 id="在vite-config-js下配置插件"><a href="#在vite-config-js下配置插件" class="headerlink" title="在vite.config.js下配置插件"></a>在vite.config.js下配置插件</h5></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@vitejs/plugin-vue&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Components</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;unplugin-vue-components/vite&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">VantResolver</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;unplugin-vue-components/resolvers&#x27;</span>;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;<br>  <span class="hljs-attr">plugins</span>: [<br>    <span class="hljs-title function_">vue</span>(),<br>    <span class="hljs-title class_">Components</span>(&#123;<br>      <span class="hljs-attr">resolvers</span>: [<span class="hljs-title class_">VantResolver</span>()],<br>    &#125;),<br>  ],<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="使用组件"><a href="#使用组件" class="headerlink" title="使用组件"></a>使用组件</h5></li>
</ul>
<ul>
<li><h5 id="在App-vue中引入组件"><a href="#在App-vue中引入组件" class="headerlink" title="在App.vue中引入组件"></a>在App.vue中引入组件</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;van-button type=&quot;primary&quot;&gt;主要按钮&lt;/van-button&gt;<br>  &lt;van-button type=&quot;success&quot;&gt;成功按钮&lt;/van-button&gt;<br>  &lt;van-button type=&quot;default&quot;&gt;默认按钮&lt;/van-button&gt;<br>  &lt;van-button type=&quot;warning&quot;&gt;警告按钮&lt;/van-button&gt;<br>  &lt;van-button type=&quot;danger&quot;&gt;危险按钮&lt;/van-button&gt;<br>&lt;/template&gt;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在main-js中导入相应的库-因为我们使用按需引入的方法来引入组件-所以这些库得自己导"><a href="#在main-js中导入相应的库-因为我们使用按需引入的方法来引入组件-所以这些库得自己导" class="headerlink" title="在main.js中导入相应的库(因为我们使用按需引入的方法来引入组件, 所以这些库得自己导)"></a>在main.js中导入相应的库(因为我们使用按需引入的方法来引入组件, 所以这些库得自己导)</h5></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123; createApp &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Button</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-string">&quot;./style.css&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;<br><br><span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>);<br>app.<span class="hljs-title function_">mount</span>(<span class="hljs-string">&quot;#app&quot;</span>);<br>app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Button</span>);<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="完成-页面已经成功被我们自定义了"><a href="#完成-页面已经成功被我们自定义了" class="headerlink" title="完成! 页面已经成功被我们自定义了"></a>完成! 页面已经成功被我们自定义了</h5></li>
<li><h5 id="接下来就是快速搭建我们自己的页面了"><a href="#接下来就是快速搭建我们自己的页面了" class="headerlink" title="接下来就是快速搭建我们自己的页面了"></a>接下来就是快速搭建我们自己的页面了</h5></li>
<li><h5 id="layouts-BasicLayout-vue"><a href="#layouts-BasicLayout-vue" class="headerlink" title="/layouts/BasicLayout.vue"></a>/layouts/BasicLayout.vue</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;!-- 导航栏 --&gt;<br>  &lt;van-nav-bar<br>    title=&quot;标题&quot;<br>    fixed<br>    left-arrow<br>    @click-left=&quot;onClickLeft&quot;<br>    @click-right=&quot;onClickRight&quot;<br>  &gt;<br>    &lt;template #right&gt;<br>      &lt;van-icon name=&quot;search&quot; size=&quot;18&quot; /&gt;<br>    &lt;/template&gt;<br>  &lt;/van-nav-bar&gt;<br><br>  &lt;!-- 内容 --&gt;<br>  &lt;div id=&quot;content&quot;&gt;<br>    &lt;template v-if=&quot;active === &#x27;index&#x27;&quot;&gt;<br>      &lt;Index /&gt;<br>    &lt;/template&gt;<br>    &lt;template v-if=&quot;active === &#x27;team&#x27;&quot;&gt;<br>      &lt;Team /&gt;<br>    &lt;/template&gt;<br>  &lt;/div&gt;<br><br>  &lt;slot&gt; 这里是内容 &lt;/slot&gt;<br>  &lt;!-- 标签页 --&gt;<br>  &lt;van-tabbar v-model=&quot;active&quot; @change=&quot;onChange&quot;&gt;<br>    &lt;van-tabbar-item icon=&quot;home-o&quot; name=&quot;index&quot;&gt;主页&lt;/van-tabbar-item&gt;<br>    &lt;van-tabbar-item icon=&quot;search&quot; name=&quot;team&quot;&gt;队伍&lt;/van-tabbar-item&gt;<br>    &lt;van-tabbar-item icon=&quot;friends-o&quot; name=&quot;user&quot;&gt;个人&lt;/van-tabbar-item&gt;<br>  &lt;/van-tabbar&gt;<br>&lt;/template&gt;<br><br>&lt;!-- 脚本 --&gt;<br>&lt;script setup lang=&quot;ts&quot;&gt;<br>import &#123; ref &#125; from &quot;vue&quot;;<br><br>import Index from &quot;./../pages/Index.vue&quot;;<br>import Team from &quot;./../pages/Team.vue&quot;;<br><br>const onClickLeft = () =&gt; alert(&quot;左&quot;);<br>const onClickRight = () =&gt; alert(&quot;右&quot;);<br><br>const active = ref(&quot;index&quot;);<br>// const onChange = (index) =&gt; alert(`$&#123;index&#125;`);<br>&lt;/script&gt;<br><br>&lt;!-- 样式 --&gt;<br>&lt;style&gt;&lt;/style&gt;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="注意vant组件的导入和vue的引入"><a href="#注意vant组件的导入和vue的引入" class="headerlink" title="注意vant组件的导入和vue的引入"></a>注意vant组件的导入和vue的引入</h5></li>
<li><h5 id="开发主页和队伍页-pages-Index-vue-pages-Team-vue"><a href="#开发主页和队伍页-pages-Index-vue-pages-Team-vue" class="headerlink" title="开发主页和队伍页 (/pages/Index.vue    /pages/Team.vue)"></a>开发主页和队伍页 (/pages/Index.vue    /pages/Team.vue)</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br><br> &lt;slot&gt; 主页 &lt;/slot&gt;<br><br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br><br> &lt;slot&gt; 队伍 &lt;/slot&gt;<br><br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<h1 id="数据库表设计"><a href="#数据库表设计" class="headerlink" title="数据库表设计"></a>数据库表设计</h1><ul>
<li><h5 id="设计标签表"><a href="#设计标签表" class="headerlink" title="设计标签表"></a>设计标签表</h5></li>
</ul>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs sql"><span class="hljs-keyword">create</span> <span class="hljs-keyword">table</span> tag<br>(<br>    id          <span class="hljs-type">bigint</span> auto_increment comment <span class="hljs-string">&#x27;id&#x27;</span> <span class="hljs-keyword">primary</span> key,<br>    tag_name    <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>)                                    <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;标签名称&#x27;</span>,<br>    userId      <span class="hljs-type">bigint</span>                                          <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;用户id&#x27;</span>,<br>    is_Parent   tinyint                                         <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;是否为父标签 0 - 不是 1 - 是&#x27;</span>,<br>    parentId    <span class="hljs-type">bigint</span>                                          <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;父标签id&#x27;</span>,<br>    create_time datetime              <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;创建时间&#x27;</span>,<br>    update_time datetime              <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;更新时间&#x27;</span>,<br>    is_delete   tinyint               <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;是否删除 0 - 正常&#x27;</span><br>) comment <span class="hljs-string">&#x27;标签表&#x27;</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="用户表添加tags字段"><a href="#用户表添加tags字段" class="headerlink" title="用户表添加tags字段"></a>用户表添加tags字段</h5></li>
</ul>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs sql"><span class="hljs-keyword">create</span> <span class="hljs-keyword">table</span> <span class="hljs-keyword">user</span><br>(<br>    id            <span class="hljs-type">bigint</span>                                 <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;id&#x27;</span> <span class="hljs-keyword">primary</span> key,<br>    user_account  <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;账号&#x27;</span>,<br>    username      <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;昵称&#x27;</span>,<br>    user_password <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>)                           <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;密码&#x27;</span>,<br>    avatar_url    <span class="hljs-type">varchar</span>(<span class="hljs-number">512</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;头像&#x27;</span>,<br>    gender        <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>) <span class="hljs-keyword">default</span> <span class="hljs-string">&#x27;0&#x27;</span>               <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;邮箱&#x27;</span>,<br>    phone         <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;电话&#x27;</span>,<br>    email         <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;邮箱&#x27;</span>,<br>    user_status   <span class="hljs-type">int</span>          <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;状态 0 - 正常&#x27;</span>,<br>    create_time   datetime     <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;创建时间&#x27;</span>,<br>    update_time   datetime     <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;更新时间&#x27;</span>,<br>    is_delete     tinyint      <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;是否删除 0 - 正常&#x27;</span>,<br>    user_role     <span class="hljs-type">int</span>(<span class="hljs-number">1</span>)       <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;用户权限 0 - 管理员 1 - 普通用户&#x27;</span>,<br>    planet_code   <span class="hljs-type">varchar</span>(<span class="hljs-number">512</span>)                           <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;星球编号&#x27;</span><br>    tags          <span class="hljs-type">varchar</span>(<span class="hljs-number">1024</span>)						     <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;标签&#x27;</span><br>)<br>    comment <span class="hljs-string">&#x27;用户&#x27;</span>;<br></code></pre></td></tr></table></figure>

<h1 id="后端接口开发"><a href="#后端接口开发" class="headerlink" title="后端接口开发"></a>后端接口开发</h1><h2 id="根据标签查询"><a href="#根据标签查询" class="headerlink" title="根据标签查询"></a>根据标签查询</h2><ul>
<li><h5 id="初始化后端环境"><a href="#初始化后端环境" class="headerlink" title="初始化后端环境"></a>初始化后端环境</h5></li>
</ul>
<ul>
<li><h5 id="开发根据标签查询符合条件用户的方法-service层"><a href="#开发根据标签查询符合条件用户的方法-service层" class="headerlink" title="开发根据标签查询符合条件用户的方法 (service层)"></a>开发根据标签查询符合条件用户的方法 (service层)</h5></li>
<li><h5 id="在内存中判断用户是个否拥有选中的标签"><a href="#在内存中判断用户是个否拥有选中的标签" class="headerlink" title="在内存中判断用户是个否拥有选中的标签"></a>在内存中判断用户是个否拥有选中的标签</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 根据标签查询用户(在内存中判断用户是个否拥有选中的标签)</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@param</span> tagNameList 打上的标签列表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@return</span> 查询到的用户</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Override</span><br><span class="hljs-keyword">public</span> List&lt;User&gt; <span class="hljs-title function_">searchUserByTags</span><span class="hljs-params">(List&lt;String&gt; tagNameList)</span> &#123;<br>    <span class="hljs-comment">// 1.默认查询全部用户</span><br>    QueryWrapper&lt;User&gt; uqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>    List&lt;User&gt; userList = userMapper.selectList(uqw);<br><br>    <span class="hljs-type">Gson</span> <span class="hljs-variable">gson</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>();<br>    <span class="hljs-comment">// 2.从查询到的用户中, 根据标签筛选出符合的用户, 组合成列表并返回</span><br>    <span class="hljs-keyword">return</span> userList.stream().filter(user -&gt; &#123;<br>        <span class="hljs-comment">// 2.1.获取用户标签</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">tagsStr</span> <span class="hljs-operator">=</span> user.getTags();<br>        <span class="hljs-comment">// 2.1.校验是否有标签</span><br>        <span class="hljs-keyword">if</span> (StringUtils.isBlank(tagsStr))<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>        <span class="hljs-comment">// 2.2.将标签从json字符串转换为List集合</span><br>        List&lt;String&gt; tempTagsNameSet = gson.fromJson(tagsStr, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeToken</span>&lt;List&lt;String&gt;&gt;() &#123;<br>        &#125;.getType());<br>        <span class="hljs-comment">// 2.3.筛出标签不符合的用户</span><br>        <span class="hljs-keyword">for</span> (String tagName : tagNameList) &#123;<br>            <span class="hljs-keyword">if</span> (!tempTagsNameSet.contains(tagName))<br>                <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>        &#125;<br>        <span class="hljs-comment">// 2.4.返回符合用户</span><br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>    &#125;).map(<span class="hljs-built_in">this</span>::getSafetyUser).collect(Collectors.toList());<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="SQL查询数据库"><a href="#SQL查询数据库" class="headerlink" title="SQL查询数据库"></a>SQL查询数据库</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 根据标签查询用户(SQL查询数据库)</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> tagNameList 打上的标签列表</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 查询到的用户</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Deprecated</span><br><span class="hljs-comment">//    @Override</span><br>    <span class="hljs-keyword">private</span> List&lt;User&gt; <span class="hljs-title function_">searchUserByTags2</span><span class="hljs-params">(List&lt;String&gt; tagNameList)</span> &#123;<br>        <span class="hljs-comment">// 1.设置查询条件</span><br>        QueryWrapper&lt;User&gt; uqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>        <span class="hljs-comment">// where tags like &quot;...&quot; and like &quot;...&quot; and ......</span><br>        <span class="hljs-keyword">for</span> (String tagName : tagNameList) &#123;<br>            uqw.like(<span class="hljs-string">&quot;tags&quot;</span>, tagName);<br>        &#125;<br>        <span class="hljs-comment">// 2.查询到符合标签的用户</span><br>        List&lt;User&gt; userList = userMapper.selectList(uqw);<br>        <span class="hljs-comment">// 3.用户信息脱敏</span><br>        <span class="hljs-keyword">return</span> userList.stream().map(<span class="hljs-built_in">this</span>::getSafetyUser).collect(Collectors.toList());<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="数据库表中添加几条测试数据"><a href="#数据库表中添加几条测试数据" class="headerlink" title="数据库表中添加几条测试数据"></a>数据库表中添加几条测试数据</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230326091433304.png" alt="image-20230326091433304"></p>
<ul>
<li><h5 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@SpringBootTest</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">UserServiceImplTest</span> &#123;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> UserService userService;<br><br>    <span class="hljs-meta">@Test</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">searchUserByTags</span><span class="hljs-params">()</span> &#123;<br>        List&lt;String&gt; tagNameList = Arrays.asList(<span class="hljs-string">&quot;java&quot;</span>, <span class="hljs-string">&quot;python&quot;</span>);<br>        List&lt;User&gt; userList = userService.searchUserByTags(tagNameList);<br>        Assertions.assertNotNull(userList);<br>    &#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="该功能开发完成"><a href="#该功能开发完成" class="headerlink" title="该功能开发完成"></a>该功能开发完成</h5></li>
</ul>
<h1 id="前端整合路由"><a href="#前端整合路由" class="headerlink" title="前端整合路由"></a>前端整合路由</h1><ul>
<li><h5 id="记得之前开发好的前端页面吧-当时实现跳转的方法是这样的"><a href="#记得之前开发好的前端页面吧-当时实现跳转的方法是这样的" class="headerlink" title="记得之前开发好的前端页面吧, 当时实现跳转的方法是这样的"></a>记得之前开发好的前端页面吧, 当时实现跳转的方法是这样的</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs vue"> &lt;!-- 内容 --&gt;<br>&lt;div id=&quot;content&quot;&gt;<br>   &lt;template v-if=&quot;active === &#x27;index&#x27;&quot;&gt;<br>     &lt;Index /&gt;<br>   &lt;/template&gt;<br>   &lt;template v-if=&quot;active === &#x27;team&#x27;&quot;&gt;<br>     &lt;Team /&gt;<br>   &lt;/template&gt;<br> &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 标签页 --&gt;<br><br> &lt;van-tabbar v-model=&quot;active&quot;&gt;<br>  &lt;van-tabbar-item to=&quot;/&quot; icon=&quot;home-o&quot; name=&quot;index&quot;&gt;主页&lt;/van-tabbar-item&gt;<br>  &lt;van-tabbar-item to=&quot;/team&quot; icon=&quot;search&quot; name=&quot;team&quot;&gt;队伍&lt;/van-tabbar-item&gt;<br>  &lt;van-tabbar-item to=&quot;/user&quot; icon=&quot;friends-o&quot; name=&quot;user&quot;<br>   \&gt;个人&lt;/van-tabbar-item&gt;<br>   &lt;/van-tabbar&gt;\<br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 默认选中页</span><br><span class="hljs-keyword">const</span> active = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;index&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="真他妈原始-我们要整点高级的-gt-使用路由跳转的方式实现页面跳转"><a href="#真他妈原始-我们要整点高级的-gt-使用路由跳转的方式实现页面跳转" class="headerlink" title="真他妈原始, 我们要整点高级的 ==&gt; 使用路由跳转的方式实现页面跳转"></a>真他妈原始, 我们要整点高级的 ==&gt; 使用路由跳转的方式实现页面跳转</h5></li>
<li><h5 id="引入Vue-Router组件"><a href="#引入Vue-Router组件" class="headerlink" title="引入Vue-Router组件"></a>引入Vue-Router组件</h5></li>
</ul>
<ul>
<li><h5 id="看官方文档-就好了"><a href="#看官方文档-就好了" class="headerlink" title="看官方文档, 就好了"></a>看官方文档, 就好了</h5></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 1. 定义路由组件.</span><br><span class="hljs-comment">// 也可以从其他文件导入</span><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">Home</span> = &#123; <span class="hljs-attr">template</span>: <span class="hljs-string">&#x27;&lt;div&gt;Home&lt;/div&gt;&#x27;</span> &#125;<br><span class="hljs-keyword">const</span> <span class="hljs-title class_">About</span> = &#123; <span class="hljs-attr">template</span>: <span class="hljs-string">&#x27;&lt;div&gt;About&lt;/div&gt;&#x27;</span> &#125;<br><br><span class="hljs-comment">// 2. 定义一些路由</span><br><span class="hljs-comment">// 每个路由都需要映射到一个组件。</span><br><span class="hljs-comment">// 我们后面再讨论嵌套路由。</span><br><span class="hljs-keyword">const</span> routes = [<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">Home</span> &#125;,<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">About</span> &#125;,<br>]<br><br><span class="hljs-comment">// 3. 创建路由实例并传递 `routes` 配置</span><br><span class="hljs-comment">// 你可以在这里输入更多的配置，但我们在这里</span><br><span class="hljs-comment">// 暂时保持简单</span><br><span class="hljs-keyword">const</span> router = <span class="hljs-title class_">VueRouter</span>.<span class="hljs-title function_">createRouter</span>(&#123;<br>  <span class="hljs-comment">// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。</span><br>  <span class="hljs-attr">history</span>: <span class="hljs-title class_">VueRouter</span>.<span class="hljs-title function_">createWebHashHistory</span>(),<br>  routes, <span class="hljs-comment">// `routes: routes` 的缩写</span><br>&#125;)<br><br><span class="hljs-comment">// 5. 创建并挂载根实例</span><br><span class="hljs-keyword">const</span> app = <span class="hljs-title class_">Vue</span>.<span class="hljs-title function_">createApp</span>(&#123;&#125;)<br><span class="hljs-comment">//确保 _use_ 路由实例使</span><br><span class="hljs-comment">//整个应用支持路由。</span><br>app.<span class="hljs-title function_">use</span>(router)<br><br>app.<span class="hljs-title function_">mount</span>(<span class="hljs-string">&#x27;#app&#x27;</span>)<br><br><span class="hljs-comment">// 现在，应用已经启动了！</span><br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="我们稍微修改一下-实现我们自定义页面的路由跳转"><a href="#我们稍微修改一下-实现我们自定义页面的路由跳转" class="headerlink" title="我们稍微修改一下, 实现我们自定义页面的路由跳转"></a>我们稍微修改一下, 实现我们自定义页面的路由跳转</h5></li>
<li><h5 id="把路由的定义封装到src-config-route-ts下-在main文件中引入就可以了"><a href="#把路由的定义封装到src-config-route-ts下-在main文件中引入就可以了" class="headerlink" title="把路由的定义封装到src/config/route.ts下, 在main文件中引入就可以了"></a>把路由的定义封装到src/config/route.ts下, 在main文件中引入就可以了</h5></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 1. 定义路由组件.</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">IndexPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/IndexPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/TeamPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/UserPage.vue&quot;</span>;<br><br><span class="hljs-comment">// 2. 定义一些路由</span><br><span class="hljs-comment">// 每个路由都需要映射到一个组件。</span><br><span class="hljs-comment">// 我们后面再讨论嵌套路由。</span><br><span class="hljs-keyword">const</span> routes = [<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">IndexPage</span> &#125;,<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamPage</span> &#125;,<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserPage</span> &#125;,<br>];<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> routes;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这是我们的main-ts文件了"><a href="#这是我们的main-ts文件了" class="headerlink" title="这是我们的main.ts文件了"></a>这是我们的main.ts文件了</h5></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123; createApp &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Icon</span>, <span class="hljs-title class_">NavBar</span>, <span class="hljs-title class_">Tabbar</span>, <span class="hljs-title class_">TabbarItem</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;<br><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-title class_">VueRouter</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> routes <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./config/route&quot;</span>;<br><br><span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>);<br>app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Button</span>);<br>app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Icon</span>);<br>app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">NavBar</span>);<br>app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Tabbar</span>);<br>app.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">TabbarItem</span>);<br><br><span class="hljs-comment">// 3. 创建路由实例并传递 `routes` 配置</span><br><span class="hljs-comment">// 你可以在这里输入更多的配置，但我们在这里</span><br><span class="hljs-comment">// 暂时保持简单</span><br><span class="hljs-keyword">const</span> router = <span class="hljs-title class_">VueRouter</span>.<span class="hljs-title function_">createRouter</span>(&#123;<br>  <span class="hljs-comment">// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。</span><br>  <span class="hljs-attr">history</span>: <span class="hljs-title class_">VueRouter</span>.<span class="hljs-title function_">createWebHashHistory</span>(),<br>  <span class="hljs-attr">routes</span>: routes, <span class="hljs-comment">// `routes: routes` 的缩写</span><br>&#125;);<br><span class="hljs-comment">// 5. 创建并挂载根实例</span><br><span class="hljs-comment">//确保 _use_ 路由实例使</span><br><span class="hljs-comment">//整个应用支持路由。</span><br>app.<span class="hljs-title function_">use</span>(router);<br>app.<span class="hljs-title function_">mount</span>(<span class="hljs-string">&quot;#app&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里我们的路由就配置好了-总体来说还是很简单的"><a href="#这里我们的路由就配置好了-总体来说还是很简单的" class="headerlink" title="这里我们的路由就配置好了, 总体来说还是很简单的"></a>这里我们的路由就配置好了, 总体来说还是很简单的</h5></li>
<li><h5 id="浅浅尝试一下用法吧-尝完就可以删了"><a href="#浅浅尝试一下用法吧-尝完就可以删了" class="headerlink" title="浅浅尝试一下用法吧 (尝完就可以删了)"></a>浅浅尝试一下用法吧 (尝完就可以删了)</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;div id=&quot;content&quot;&gt;<br>  &lt;router-view /&gt;<br>&lt;/div&gt;<br><br>&lt;router-link to=&quot;/&quot;&gt;Go to Home&lt;/router-link&gt;<br>&lt;router-link to=&quot;/about&quot;&gt;Go to About&lt;/router-link&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="如上-这样就能够使用路由实现页面跳转了-非常方便"><a href="#如上-这样就能够使用路由实现页面跳转了-非常方便" class="headerlink" title="如上, 这样就能够使用路由实现页面跳转了, 非常方便!"></a>如上, 这样就能够使用路由实现页面跳转了, 非常方便!</h5></li>
<li><h5 id="幸运的是-我们的van-tabbar组件也内置了路由跳转-改写为以下形式"><a href="#幸运的是-我们的van-tabbar组件也内置了路由跳转-改写为以下形式" class="headerlink" title="幸运的是, 我们的van-tabbar组件也内置了路由跳转, 改写为以下形式:"></a>幸运的是, 我们的van-tabbar组件也内置了路由跳转, 改写为以下形式:</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 标签页 --&gt;<br> &lt;van-tabbar route&gt;<br>   &lt;van-tabbar-item to=&quot;/&quot; icon=&quot;home-o&quot; name=&quot;index&quot;&gt;主页&lt;/van-tabbar-item&gt;<br>   &lt;van-tabbar-item to=&quot;/team&quot; icon=&quot;search&quot; name=&quot;team&quot;&gt;队伍&lt;/van-tabbar-item&gt;<br>   &lt;van-tabbar-item to=&quot;/user&quot; icon=&quot;friends-o&quot; name=&quot;user&quot;<br>     &gt;个人&lt;/van-tabbar-item<br>   &gt;<br> &lt;/van-tabbar&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="路由整合完成了呢"><a href="#路由整合完成了呢" class="headerlink" title="路由整合完成了呢"></a>路由整合完成了呢</h5></li>
<li><h5 id="差点忘记了-这里有个非常恶心的BUG-我配完vue-router配置后-启动服务显示页面为空白-怎么搞都没反应-结果把自定义路由那儿的-“-“-删了改成-“-index”后-就他妈有页面了-我他妈给改回去后-既然能正常显示了-真奶奶的无语-还好老子聪明机智哈哈哈-差点栽这儿出不来了"><a href="#差点忘记了-这里有个非常恶心的BUG-我配完vue-router配置后-启动服务显示页面为空白-怎么搞都没反应-结果把自定义路由那儿的-“-“-删了改成-“-index”后-就他妈有页面了-我他妈给改回去后-既然能正常显示了-真奶奶的无语-还好老子聪明机智哈哈哈-差点栽这儿出不来了" class="headerlink" title="差点忘记了, 这里有个非常恶心的BUG, 我配完vue-router配置后, 启动服务显示页面为空白, 怎么搞都没反应, 结果把自定义路由那儿的 “/“ 删了改成 “/index”后, 就他妈有页面了, 我他妈给改回去后, 既然能正常显示了?!真奶奶的无语, 还好老子聪明机智哈哈哈, 差点栽这儿出不来了"></a>差点忘记了, 这里有个非常恶心的BUG, 我配完vue-router配置后, 启动服务显示页面为空白, 怎么搞都没反应, 结果把自定义路由那儿的 “/“ 删了改成 “/index”后, 就他妈有页面了, 我他妈给改回去后, 既然能正常显示了?!真奶奶的无语, 还好老子聪明机智哈哈哈, 差点栽这儿出不来了</h5></li>
</ul>
<h1 id="前端页面开发"><a href="#前端页面开发" class="headerlink" title="前端页面开发"></a>前端页面开发</h1><ul>
<li><strong>路由整合完毕之后，接下来就要开发我们的搜索页面了：</strong></li>
</ul>
<h2 id="搜索页面"><a href="#搜索页面" class="headerlink" title="搜索页面"></a>搜索页面</h2><ul>
<li><strong>开发页面之前，我们先把搜索页面的路由配置好吧 （src/config/route.ts）</strong></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 2. 定义一些路由</span><br><span class="hljs-comment">// 每个路由都需要映射到一个组件。</span><br><span class="hljs-comment">// 我们后面再讨论嵌套路由。</span><br><span class="hljs-keyword">const</span> routes = [<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">IndexPage</span> &#125;,<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamPage</span> &#125;,<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserPage</span> &#125;,<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/search&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">SearchPage</span> &#125;,<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/edit&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserEditPage</span> &#125;,<br>];<br></code></pre></td></tr></table></figure>

<ul>
<li><p><strong>这里顺带把后面的用户信息页和用户信息修改页路由页配置好了，后面就不涉及了</strong></p>
</li>
<li><h5 id="点击导航栏的搜索符号跳转到搜索页面"><a href="#点击导航栏的搜索符号跳转到搜索页面" class="headerlink" title="点击导航栏的搜索符号跳转到搜索页面"></a>点击导航栏的搜索符号跳转到搜索页面</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">onClickRight</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">push</span>(<span class="hljs-string">&quot;/search&quot;</span>);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><strong>去找到合适的组件，完成页面开发</strong></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 搜索栏 --&gt;<br> &lt;form action=&quot;/&quot;&gt;<br>   &lt;van-search<br>     v-model=&quot;searchText&quot;<br>     show-action<br>     placeholder=&quot;请输入搜索关键词&quot;<br>     @search=&quot;onSearch&quot;<br>     @cancel=&quot;onCancel&quot;<br>   /&gt;<br> &lt;/form&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 分割线 --&gt;<br>  &lt;van-divider content-position=&quot;left&quot;&gt;已选标签&lt;/van-divider&gt;  <br>  &lt;van-divider content-position=&quot;right&quot;&gt;可选标签&lt;/van-divider&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 选中的标签  layout布局 --&gt;<br>  &lt;van-row gutter=&quot;20&quot;&gt;<br>    &lt;van-col v-for=&quot;tag in activeIds&quot;&gt;<br>      &lt;van-tag closeable size=&quot;medium&quot; type=&quot;primary&quot; @close=&quot;close&quot;&gt;<br>        &#123;&#123; tag &#125;&#125;<br>      &lt;/van-tag&gt;<br>    &lt;/van-col&gt;<br>  &lt;/van-row&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 标签列表 --&gt;<br>  &lt;van-tree-select<br>    v-model:active-id=&quot;activeIds&quot;<br>    v-model:main-active-index=&quot;activeIndex&quot;<br>    :items=&quot;tagList&quot;<br>  /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><strong>在脚本里编写一些逻辑，最终达成了：</strong></li>
</ul>
<ol>
<li><h5 id="搜索栏可以筛选标签列表里的标签"><a href="#搜索栏可以筛选标签列表里的标签" class="headerlink" title="搜索栏可以筛选标签列表里的标签"></a>搜索栏可以筛选标签列表里的标签</h5></li>
<li><h5 id="选中标签列表后可以把标签整合成json字符串，将来可以发送json字符串实现根据标签搜索用户"><a href="#选中标签列表后可以把标签整合成json字符串，将来可以发送json字符串实现根据标签搜索用户" class="headerlink" title="选中标签列表后可以把标签整合成json字符串，将来可以发送json字符串实现根据标签搜索用户"></a>选中标签列表后可以把标签整合成json字符串，将来可以发送json字符串实现根据标签搜索用户</h5></li>
<li><h5 id="注：这块逻辑比较难，可以多加理解消化，这里不做过多介绍了（因为我自己也看懵了，照着人家的代码写下来的）"><a href="#注：这块逻辑比较难，可以多加理解消化，这里不做过多介绍了（因为我自己也看懵了，照着人家的代码写下来的）" class="headerlink" title="注：这块逻辑比较难，可以多加理解消化，这里不做过多介绍了（因为我自己也看懵了，照着人家的代码写下来的）"></a>注：这块逻辑比较难，可以多加理解消化，这里不做过多介绍了（因为我自己也看懵了，照着人家的代码写下来的）</h5><h5 id="展示一下搜索页最终代码和实现效果吧"><a href="#展示一下搜索页最终代码和实现效果吧" class="headerlink" title="展示一下搜索页最终代码和实现效果吧"></a>展示一下搜索页最终代码和实现效果吧</h5></li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;!-- 搜索栏 --&gt;<br>  &lt;form action=&quot;/&quot;&gt;<br>    &lt;van-search<br>      v-model=&quot;searchText&quot;<br>      show-action<br>      placeholder=&quot;请输入搜索关键词&quot;<br>      @search=&quot;onSearch&quot;<br>      @cancel=&quot;onCancel&quot;<br>    /&gt;<br>  &lt;/form&gt;<br>  &lt;!-- 分割线 --&gt;<br>  &lt;van-divider content-position=&quot;left&quot;&gt;已选标签&lt;/van-divider&gt;<br>  &lt;div v-if=&quot;activeIds.length === 0&quot;&gt;请选择标签&lt;/div&gt;<br>  &lt;!-- 选中的标签  layout布局 --&gt;<br>  &lt;van-row gutter=&quot;20&quot;&gt;<br>    &lt;van-col v-for=&quot;tag in activeIds&quot;&gt;<br>      &lt;van-tag closeable size=&quot;medium&quot; type=&quot;primary&quot; @close=&quot;close&quot;&gt;<br>        &#123;&#123; tag &#125;&#125;<br>      &lt;/van-tag&gt;<br>    &lt;/van-col&gt;<br>  &lt;/van-row&gt;<br><br>  &lt;van-divider content-position=&quot;right&quot;&gt;可选标签&lt;/van-divider&gt;<br>  &lt;!-- 标签列表 --&gt;<br>  &lt;van-tree-select<br>    v-model:active-id=&quot;activeIds&quot;<br>    v-model:main-active-index=&quot;activeIndex&quot;<br>    :items=&quot;tagList&quot;<br>  /&gt;<br>&lt;/template&gt;<br><br>&lt;script setup lang=&quot;ts&quot;&gt;<br>import &#123; ref &#125; from &quot;vue&quot;;<br><br>const searchText = ref(&quot;&quot;);<br><br>// 已选中的标签<br>const activeIds = ref([]);<br>const activeIndex = ref(0);<br><br>// 原始标签列表<br>const originTagList = [<br>  &#123;<br>    text: &quot;年级&quot;,<br>    children: [<br>      &#123; text: &quot;大一&quot;, id: &quot;大一&quot; &#125;,<br>      &#123; text: &quot;大二&quot;, id: &quot;大二&quot; &#125;,<br>      &#123; text: &quot;大三&quot;, id: &quot;大三&quot; &#125;,<br>      &#123; text: &quot;大四&quot;, id: &quot;大四&quot; &#125;,<br>      &#123; text: &quot;大五&quot;, id: &quot;大五&quot;, disabled: true &#125;,<br>    ],<br>  &#125;,<br>  &#123;<br>    text: &quot;性别&quot;,<br>    children: [<br>      &#123; text: &quot;男&quot;, id: &quot;男&quot; &#125;,<br>      &#123; text: &quot;女&quot;, id: &quot;女&quot; &#125;,<br>    ],<br>  &#125;,<br>];<br><br>// 实际标签列表<br>let tagList = ref(originTagList);<br><br>/**<br> * 搜索过滤<br> * @param val<br> */<br>const onSearch = (val: any) =&gt; &#123;<br>  tagList.value = originTagList.map((parentTag) =&gt; &#123;<br>    const tempChildren = [...parentTag.children];<br>    const tempParentTag = &#123; ...parentTag &#125;;<br>    tempParentTag.children = tempChildren.filter((item) =&gt;<br>      item.text.includes(searchText.value)<br>    );<br>    return tempParentTag;<br>  &#125;);<br>&#125;;<br><br>// 取消<br>const onCancel = () =&gt; &#123;<br>  searchText.value = &quot;&quot;;<br>  tagList.value = originTagList;<br>&#125;;<br><br>// 关闭标签<br>const close = (tag: any) =&gt; &#123;<br>  activeIds.value = activeIds.value.filter((item) =&gt; &#123;<br>    return item !== tag;<br>  &#125;);<br>&#125;;<br>&lt;/script&gt;<br><br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230402160806287.png" alt="image-20230402160806287"></p>
<h2 id="用户信息页"><a href="#用户信息页" class="headerlink" title="用户信息页"></a>用户信息页</h2><ul>
<li><h5 id="这里就比较简单了，开发！"><a href="#这里就比较简单了，开发！" class="headerlink" title="这里就比较简单了，开发！"></a>这里就比较简单了，开发！</h5></li>
<li><h5 id="引入相关表单组件-Cell单元格"><a href="#引入相关表单组件-Cell单元格" class="headerlink" title="引入相关表单组件    Cell单元格"></a>引入相关表单组件    Cell单元格</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;!-- &lt;slot&gt; 个人 &lt;/slot&gt; --&gt;<br>  &lt;van-cell title=&quot;账号&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.username&quot; /&gt;<br>  &lt;van-cell title=&quot;昵称&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.userAccount&quot; /&gt;<br>  &lt;van-cell title=&quot;头像&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.avatarUrl&quot; /&gt;<br>  &lt;van-cell title=&quot;性别&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.gender&quot; /&gt;<br>  &lt;van-cell title=&quot;电话&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.phone&quot; /&gt;<br>  &lt;van-cell title=&quot;邮箱&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.email&quot; /&gt;<br>  &lt;van-cell title=&quot;星球编号&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.planetCode&quot; /&gt;<br>  &lt;van-cell title=&quot;注册时间&quot; is-link to=&quot;/user/edit&quot; :value=&quot;user.createTime.toISOString()&quot;/&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="自己在src-models下写一个user-d-ts，自定义userType类型，将来填充表单"><a href="#自己在src-models下写一个user-d-ts，自定义userType类型，将来填充表单" class="headerlink" title="自己在src/models下写一个user.d.ts，自定义userType类型，将来填充表单"></a>自己在src/models下写一个user.d.ts，自定义userType类型，将来填充表单</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 用户信息</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">type</span> userType = &#123;<br>  id?: <span class="hljs-built_in">number</span>;<br>  userAccount?: <span class="hljs-built_in">string</span>;<br>  username?: <span class="hljs-built_in">string</span>;<br>  avatarUrl?: <span class="hljs-built_in">string</span>;<br>  gender?: <span class="hljs-built_in">string</span>;<br>  phone?: <span class="hljs-built_in">string</span>;<br>  email?: <span class="hljs-built_in">string</span>;<br>  createTime?: <span class="hljs-title class_">Date</span>;<br>  userStatus?: <span class="hljs-built_in">string</span>;<br>  userRole?: <span class="hljs-built_in">number</span>;<br>  planetCode?: <span class="hljs-built_in">string</span>;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="自定义一个用户对象，由于目前没有相关接口从后端拿取数据，给定一些假数据测试效果"><a href="#自定义一个用户对象，由于目前没有相关接口从后端拿取数据，给定一些假数据测试效果" class="headerlink" title="自定义一个用户对象，由于目前没有相关接口从后端拿取数据，给定一些假数据测试效果"></a>自定义一个用户对象，由于目前没有相关接口从后端拿取数据，给定一些假数据测试效果</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> user = &#123;<br>  <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>  <span class="hljs-attr">userAccount</span>: <span class="hljs-string">&quot;memory&quot;</span>,<br>  <span class="hljs-attr">username</span>: <span class="hljs-string">&quot;邓哈哈&quot;</span>,<br>  <span class="hljs-attr">avatarUrl</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">gender</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>  <span class="hljs-attr">phone</span>: <span class="hljs-string">&quot;18887786754&quot;</span>,<br>  <span class="hljs-attr">email</span>: <span class="hljs-string">&quot;3348407547@qq.com&quot;</span>,<br>  <span class="hljs-attr">planetCode</span>: <span class="hljs-string">&quot;17625&quot;</span>,<br>  <span class="hljs-attr">createTime</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(),<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="对表单稍作修改，给表单列绑定数据模型，同时点击相关列后可以修改该项，并跳转至用户修改页"><a href="#对表单稍作修改，给表单列绑定数据模型，同时点击相关列后可以修改该项，并跳转至用户修改页" class="headerlink" title="对表单稍作修改，给表单列绑定数据模型，同时点击相关列后可以修改该项，并跳转至用户修改页"></a>对表单稍作修改，给表单列绑定数据模型，同时点击相关列后可以修改该项，并跳转至用户修改页</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;!-- &lt;slot&gt; 个人 &lt;/slot&gt; --&gt;<br>  &lt;van-cell<br>    title=&quot;账号&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.userAccount&quot;<br>    @click=&quot;toEdit(&#x27;userAccount&#x27;, &#x27;账号&#x27;, user.userAccount)&quot;<br>  /&gt;<br>  &lt;van-cell<br>    title=&quot;昵称&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.username&quot;<br>    @click=&quot;toEdit(&#x27;username&#x27;, &#x27;昵称&#x27;, user.username)&quot;<br>  /&gt;<br>  &lt;van-cell<br>    title=&quot;头像&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.avatarUrl&quot;<br>    @click=&quot;toEdit(&#x27;avatarUrl&#x27;, &#x27;头像&#x27;, user.avatarUrl)&quot;<br>  /&gt;<br>  &lt;van-cell<br>    title=&quot;性别&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.gender&quot;<br>    @click=&quot;toEdit(&#x27;gender&#x27;, &#x27;性别&#x27;, user.gender)&quot;<br>  /&gt;<br>  &lt;van-cell<br>    title=&quot;电话&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.phone&quot;<br>    @click=&quot;toEdit(&#x27;phone&#x27;, &#x27;电话&#x27;, user.phone)&quot;<br>  /&gt;<br>  &lt;van-cell<br>    title=&quot;邮箱&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.email&quot;<br>    @click=&quot;toEdit(&#x27;email&#x27;, &#x27;邮箱&#x27;, user.email)&quot;<br>  /&gt;<br>  &lt;van-cell<br>    title=&quot;星球编号&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.planetCode&quot;<br>    @click=&quot;toEdit(&#x27;planetCode&#x27;, &#x27;星球编号&#x27;, user.planetCode)&quot;<br>  /&gt;<br>  &lt;van-cell<br>    title=&quot;注册时间&quot;<br>    is-link<br>    to=&quot;/user/edit&quot;<br>    :value=&quot;user.createTime.toISOString()&quot;<br>    @click=&quot;toEdit(&#x27;createTime&#x27;, &#x27;注册时间&#x27;, user.createTime.toISOString())&quot;<br>  /&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="script下实现toEdit方法，携带相关参数并跳转至用户修改页下（路由我们前面写过了）"><a href="#script下实现toEdit方法，携带相关参数并跳转至用户修改页下（路由我们前面写过了）" class="headerlink" title="script下实现toEdit方法，携带相关参数并跳转至用户修改页下（路由我们前面写过了）"></a>script下实现toEdit方法，携带相关参数并跳转至用户修改页下（路由我们前面写过了）</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><br><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">toEdit</span> = (<span class="hljs-params">editKey: <span class="hljs-built_in">string</span>, editName: <span class="hljs-built_in">string</span>, currentValue: <span class="hljs-built_in">string</span></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">push</span>(&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/edit&quot;</span>,<br>    <span class="hljs-attr">query</span>: &#123;<br>      editKey,<br>      editName,<br>      currentValue,<br>    &#125;,<br>  &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这个跳转并携带参数涉及到vue-Router的两个组件，非常重要，马上讲到👇"><a href="#这个跳转并携带参数涉及到vue-Router的两个组件，非常重要，马上讲到👇" class="headerlink" title="这个跳转并携带参数涉及到vue-Router的两个组件，非常重要，马上讲到👇"></a>这个跳转并携带参数涉及到vue-Router的两个组件，非常重要，马上讲到👇</h5></li>
</ul>
<h2 id="用户信息修改页"><a href="#用户信息修改页" class="headerlink" title="用户信息修改页"></a>用户信息修改页</h2><ul>
<li><h5 id="跟前面同样的操作，引入相关组件-From表单"><a href="#跟前面同样的操作，引入相关组件-From表单" class="headerlink" title="跟前面同样的操作，引入相关组件   From表单"></a>跟前面同样的操作，引入相关组件   From表单</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-form @submit=&quot;onSubmit&quot;&gt;<br>  &lt;van-cell-group inset&gt;<br>    &lt;van-field<br>      v-model=&quot;username&quot;<br>      name=&quot;用户名&quot;<br>      label=&quot;用户名&quot;<br>      placeholder=&quot;用户名&quot;<br>    /&gt;<br>  &lt;/van-cell-group&gt;<br>  <br>  &lt;div style=&quot;margin: 16px;&quot;&gt;<br>    &lt;van-button round block type=&quot;primary&quot; native-type=&quot;submit&quot;&gt;<br>      提交<br>    &lt;/van-button&gt;<br>  &lt;/div&gt;<br>&lt;/van-form&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="自定义一个修改后的用户信息对象"><a href="#自定义一个修改后的用户信息对象" class="headerlink" title="自定义一个修改后的用户信息对象"></a>自定义一个修改后的用户信息对象</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> <span class="hljs-attr">editUser</span>: editUserType = <span class="hljs-title function_">ref</span>(&#123;<br>  <span class="hljs-attr">editKey</span>: route.<span class="hljs-property">query</span>.<span class="hljs-property">editKey</span>,<br>  <span class="hljs-attr">editName</span>: route.<span class="hljs-property">query</span>.<span class="hljs-property">editName</span>,<br>  <span class="hljs-attr">currentValue</span>: route.<span class="hljs-property">query</span>.<span class="hljs-property">currentValue</span>,<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="修改一下表单，能不能实现用户编辑信息页的某项信息时，用户信息修改页正确显示"><a href="#修改一下表单，能不能实现用户编辑信息页的某项信息时，用户信息修改页正确显示" class="headerlink" title="修改一下表单，能不能实现用户编辑信息页的某项信息时，用户信息修改页正确显示"></a>修改一下表单，能不能实现用户编辑信息页的某项信息时，用户信息修改页正确显示</h5></li>
</ul>
<ul>
<li><h5 id="改成这样👇："><a href="#改成这样👇：" class="headerlink" title="改成这样👇："></a>改成这样👇：</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- &lt;slot&gt;用户编辑页&lt;/slot&gt; --&gt;<br> &lt;van-form @submit=&quot;onSubmit&quot;&gt;<br>   &lt;van-field<br>     v-model=&quot;editUser.currentValue&quot;<br>     :name=&quot;editUser.editKey&quot;<br>     :label=&quot;editUser.editName&quot;<br>     :placeholder=&quot;`$&#123;editUser.editKey&#125;`&quot;<br>   /&gt;<br><br>   &lt;div style=&quot;margin: 16px&quot;&gt;<br>     &lt;van-button<br>       round<br>       block<br>       type=&quot;primary&quot;<br>       native-type=&quot;submit&quot;<br>     &gt;<br>       提交<br>     &lt;/van-button&gt;<br>   &lt;/div&gt;<br> &lt;/van-form&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="测试一下，完成功能！"><a href="#测试一下，完成功能！" class="headerlink" title="测试一下，完成功能！"></a>测试一下，完成功能！</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230402163407935.png" alt="image-20230402163407935"></p>
<ul>
<li><h5 id="什么原理呢？用户信息页的信息是怎样传到用户信息修改页并正确显示的呢？我们捋一捋："><a href="#什么原理呢？用户信息页的信息是怎样传到用户信息修改页并正确显示的呢？我们捋一捋：" class="headerlink" title="什么原理呢？用户信息页的信息是怎样传到用户信息修改页并正确显示的呢？我们捋一捋："></a>什么原理呢？用户信息页的信息是怎样传到用户信息修改页并正确显示的呢？我们捋一捋：</h5></li>
<li><h5 id="用户信息页我们写过这个："><a href="#用户信息页我们写过这个：" class="headerlink" title="用户信息页我们写过这个："></a>用户信息页我们写过这个：</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><br><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">toEdit</span> = (<span class="hljs-params">editKey: <span class="hljs-built_in">string</span>, editName: <span class="hljs-built_in">string</span>, currentValue: <span class="hljs-built_in">string</span></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">push</span>(&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/edit&quot;</span>,<br>    <span class="hljs-attr">query</span>: &#123;<br>      editKey,<br>      editName,<br>      currentValue,<br>    &#125;,<br>  &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="干了什么？一句话：就是携带了参数-query-并跳转到了对应路由组件-“-user-edit”-里"><a href="#干了什么？一句话：就是携带了参数-query-并跳转到了对应路由组件-“-user-edit”-里" class="headerlink" title="干了什么？一句话：就是携带了参数 query 并跳转到了对应路由组件 “/user/edit” 里"></a>干了什么？一句话：就是携带了参数 query 并跳转到了对应路由组件 “/user/edit” 里</h5></li>
<li><h5 id="当然，组件-router-实现了这个功能"><a href="#当然，组件-router-实现了这个功能" class="headerlink" title="当然，组件 router 实现了这个功能"></a>当然，组件 router 实现了这个功能</h5></li>
<li><h5 id="那用户信心修改页呢，又干了什么？"><a href="#那用户信心修改页呢，又干了什么？" class="headerlink" title="那用户信心修改页呢，又干了什么？"></a>那用户信心修改页呢，又干了什么？</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> &#123; useRoute &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><br><span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>();<br><br><span class="hljs-keyword">const</span> <span class="hljs-attr">editUser</span>: editUserType = <span class="hljs-title function_">ref</span>(&#123;<br>  <span class="hljs-attr">editKey</span>: route.<span class="hljs-property">query</span>.<span class="hljs-property">editKey</span>,<br>  <span class="hljs-attr">editName</span>: route.<span class="hljs-property">query</span>.<span class="hljs-property">editName</span>,<br>  <span class="hljs-attr">currentValue</span>: route.<span class="hljs-property">query</span>.<span class="hljs-property">currentValue</span>,<br>&#125;);<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-field<br>      v-model=&quot;editUser.currentValue&quot;<br>      :name=&quot;editUser.editKey&quot;<br>      :label=&quot;editUser.editName&quot;<br>      :placeholder=&quot;`$&#123;editUser.editKey&#125;`&quot;<br>    /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="也是一句话：拿到了-当前路由组件下接收的参数-query-并在表单上-绑定了数据模型，同步显示了而已"><a href="#也是一句话：拿到了-当前路由组件下接收的参数-query-并在表单上-绑定了数据模型，同步显示了而已" class="headerlink" title="也是一句话：拿到了 当前路由组件下接收的参数 query , 并在表单上 绑定了数据模型，同步显示了而已"></a>也是一句话：拿到了 当前路由组件下接收的参数 query , 并在表单上 绑定了数据模型，同步显示了而已</h5></li>
<li><h5 id="当然，组件-route-实现了这个功能"><a href="#当然，组件-route-实现了这个功能" class="headerlink" title="当然，组件 route 实现了这个功能"></a>当然，组件 route 实现了这个功能</h5></li>
</ul>
<h1 id="Swagger-knif4j-自动生成接口文档"><a href="#Swagger-knif4j-自动生成接口文档" class="headerlink" title="Swagger + knif4j 自动生成接口文档"></a>Swagger + knif4j 自动生成接口文档</h1><ul>
<li><h5 id="这里我们用knif4j，来到官方文档跟着快速操作即可"><a href="#这里我们用knif4j，来到官方文档跟着快速操作即可" class="headerlink" title="这里我们用knif4j，来到官方文档跟着快速操作即可"></a>这里我们用knif4j，来到官方文档跟着快速操作即可</h5></li>
</ul>
<ul>
<li><h5 id="第一步：创建Spring-Boot项目并且在pom-xml中引入Knife4j的依赖包，代码如下："><a href="#第一步：创建Spring-Boot项目并且在pom-xml中引入Knife4j的依赖包，代码如下：" class="headerlink" title="第一步：创建Spring Boot项目并且在pom.xml中引入Knife4j的依赖包，代码如下："></a>第一步：<a target="_blank" rel="noopener" href="https://spring.io/guides/gs/spring-boot/">创建Spring Boot项目</a>并且在pom.xml中引入<a target="_blank" rel="noopener" href="https://search.maven.org/search?q=g:com.github.xiaoymin">Knife4j的依赖包</a>，代码如下：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs java">&lt;!--引入Knife4j的官方start包,该指南选择Spring Boot版本&lt;<span class="hljs-number">3.0</span>,开发者需要注意--&gt;<br>      &lt;dependency&gt;<br>          &lt;groupId&gt;com.github.xiaoymin&lt;/groupId&gt;<br>          &lt;artifactId&gt;knife4j-openapi2-spring-boot-starter&lt;/artifactId&gt;<br>          &lt;version&gt;<span class="hljs-number">4.0</span><span class="hljs-number">.0</span>&lt;/version&gt;<br>      &lt;/dependency&gt;<br>  <br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="第二步：创建Swagger配置依赖，代码如下："><a href="#第二步：创建Swagger配置依赖，代码如下：" class="headerlink" title="第二步：创建Swagger配置依赖，代码如下："></a>第二步：创建Swagger配置依赖，代码如下：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.memory.usercenter.config;<br><br><span class="hljs-keyword">import</span> org.springframework.context.annotation.Bean;<br><span class="hljs-keyword">import</span> org.springframework.context.annotation.Configuration;<br><span class="hljs-keyword">import</span> springfox.documentation.builders.ApiInfoBuilder;<br><span class="hljs-keyword">import</span> springfox.documentation.builders.PathSelectors;<br><span class="hljs-keyword">import</span> springfox.documentation.builders.RequestHandlerSelectors;<br><span class="hljs-keyword">import</span> springfox.documentation.spi.DocumentationType;<br><span class="hljs-keyword">import</span> springfox.documentation.spring.web.plugins.Docket;<br><span class="hljs-keyword">import</span> springfox.documentation.swagger2.annotations.EnableSwagger2WebMvc;<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/2 23:39</span><br><span class="hljs-comment"> * Function:</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Configuration</span><br><span class="hljs-meta">@EnableSwagger2WebMvc</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Knife4jConfiguration</span> &#123;<br>    <span class="hljs-meta">@Bean(value = &quot;dockerBean&quot;)</span><br>    <span class="hljs-keyword">public</span> Docket <span class="hljs-title function_">dockerBean</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-comment">//指定使用Swagger2规范</span><br>        <span class="hljs-type">Docket</span> <span class="hljs-variable">docket</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Docket</span>(DocumentationType.SWAGGER_2)<br>                .apiInfo(<span class="hljs-keyword">new</span> <span class="hljs-title class_">ApiInfoBuilder</span>()<br>                        <span class="hljs-comment">//描述字段支持Markdown语法</span><br>                        .title(<span class="hljs-string">&quot;Memory用户中心&quot;</span>)<br>                        .description(<span class="hljs-string">&quot;# Memory用户中心接口文档&quot;</span>)<br>                        .termsOfServiceUrl(<span class="hljs-string">&quot;https://gitee.com/deng-2022/client-center&quot;</span>)<br>                        .contact(<span class="hljs-string">&quot;3348407547@qq.com&quot;</span>)<br>                        .version(<span class="hljs-string">&quot;1.0&quot;</span>)<br>                        .build())<br>                <span class="hljs-comment">//分组名称</span><br>                .groupName(<span class="hljs-string">&quot;用户服务&quot;</span>)<br>                .select()<br>                <span class="hljs-comment">//这里指定Controller扫描包路径</span><br>                .apis(RequestHandlerSelectors.basePackage(<span class="hljs-string">&quot;com.memory.usercenter.controller&quot;</span>))<br>                .paths(PathSelectors.any())<br>                .build();<br>        <span class="hljs-keyword">return</span> docket;<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="然后启动项目即可"><a href="#然后启动项目即可" class="headerlink" title="然后启动项目即可"></a>然后启动项目即可</h5></li>
<li><h5 id="访问-http-localhost-8081-api-doc-html-成功自动生成接口文档！"><a href="#访问-http-localhost-8081-api-doc-html-成功自动生成接口文档！" class="headerlink" title="访问   http://localhost:8081/api/doc.html 成功自动生成接口文档！"></a>访问   <a target="_blank" rel="noopener" href="http://localhost:8081/api/doc.html">http://localhost:8081/api/doc.html</a> 成功自动生成接口文档！</h5></li>
<li><h5 id="如果springBoot版本高于2-6，可能会有报错，这是因为-knif4j-不兼容现今高版本的springBoot，这里有两种解决办法："><a href="#如果springBoot版本高于2-6，可能会有报错，这是因为-knif4j-不兼容现今高版本的springBoot，这里有两种解决办法：" class="headerlink" title="如果springBoot版本高于2.6，可能会有报错，这是因为 knif4j 不兼容现今高版本的springBoot，这里有两种解决办法："></a>如果springBoot版本高于2.6，可能会有报错，这是因为 knif4j 不兼容现今高版本的springBoot，这里有两种解决办法：</h5></li>
</ul>
<ol>
<li><h5 id="降低springBoot的版本使其兼容knif4j（很不现实的解决方法，不推荐）"><a href="#降低springBoot的版本使其兼容knif4j（很不现实的解决方法，不推荐）" class="headerlink" title="降低springBoot的版本使其兼容knif4j（很不现实的解决方法，不推荐）"></a>降低springBoot的版本使其兼容knif4j（很不现实的解决方法，不推荐）</h5></li>
<li><h5 id="application-yaml文件里添加如下配置："><a href="#application-yaml文件里添加如下配置：" class="headerlink" title="application.yaml文件里添加如下配置："></a>application.yaml文件里添加如下配置：</h5></li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">spring:</span><br> 	<span class="hljs-attr">mvc:</span><br>      <span class="hljs-attr">pathmatch:</span><br>      	  <span class="hljs-attr">matching-strategy:</span> <span class="hljs-string">ANT_PATH_MATCHER</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="问题即可解决！"><a href="#问题即可解决！" class="headerlink" title="问题即可解决！"></a>问题即可解决！</h5></li>
<li><h6 id="这里还要注意Swagger文档不能随意暴露在外！可能会有不法分子利用该文档调用接口、泄露数据"><a href="#这里还要注意Swagger文档不能随意暴露在外！可能会有不法分子利用该文档调用接口、泄露数据" class="headerlink" title="这里还要注意Swagger文档不能随意暴露在外！可能会有不法分子利用该文档调用接口、泄露数据"></a>这里还要注意Swagger文档不能随意暴露在外！可能会有不法分子利用该文档调用接口、泄露数据</h6></li>
<li><h5 id="我们在application-yaml下定义开发环境："><a href="#我们在application-yaml下定义开发环境：" class="headerlink" title="我们在application.yaml下定义开发环境："></a>我们在application.yaml下定义开发环境：</h5></li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">spring:</span><br>  <span class="hljs-attr">profiles:</span><br>    <span class="hljs-attr">active:</span> <span class="hljs-string">dev</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在knif4j配置前还可以配置-Profile，在指定开发环境下才会生成接口文档，否则访问失败"><a href="#在knif4j配置前还可以配置-Profile，在指定开发环境下才会生成接口文档，否则访问失败" class="headerlink" title="在knif4j配置前还可以配置@Profile，在指定开发环境下才会生成接口文档，否则访问失败"></a>在knif4j配置前还可以配置@Profile，在指定开发环境下才会生成接口文档，否则访问失败</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Configuration</span><br><span class="hljs-meta">@EnableSwagger2WebMvc</span><br><span class="hljs-meta">@Profile(&#123;&quot;dev&quot;, &quot;test&quot;&#125;)</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Knife4jConfiguration</span> &#123;<br>	...........................<br>&#125;<br></code></pre></td></tr></table></figure>

<h1 id="抓取网页信息"><a href="#抓取网页信息" class="headerlink" title="抓取网页信息"></a>抓取网页信息</h1><ul>
<li><h5 id="从Excel表格中导入用户数据-gt-EasyExcel"><a href="#从Excel表格中导入用户数据-gt-EasyExcel" class="headerlink" title="从Excel表格中导入用户数据 -&gt; EasyExcel"></a>从Excel表格中导入用户数据 -&gt; EasyExcel</h5></li>
</ul>
<ul>
<li><h5 id="看着官网，跟着操作即可-（在新增目录-once下）："><a href="#看着官网，跟着操作即可-（在新增目录-once下）：" class="headerlink" title="看着官网，跟着操作即可 （在新增目录/once下）："></a>看着官网，跟着操作即可 （在新增目录/once下）：</h5></li>
<li><h5 id="编写映射对象"><a href="#编写映射对象" class="headerlink" title="编写映射对象"></a>编写映射对象</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">UserInfo</span> &#123;<br>    <span class="hljs-meta">@ExcelProperty(&quot;成员编号&quot;)</span><br>    <span class="hljs-keyword">private</span> String planetCode;<br><br><br>    <span class="hljs-meta">@ExcelProperty(&quot;成员昵称&quot;)</span><br>    <span class="hljs-keyword">private</span> String username;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="编写监听器"><a href="#编写监听器" class="headerlink" title="编写监听器"></a>编写监听器</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 有个很重要的点 DemoDataListener 不能被spring管理，</span><br><span class="hljs-comment">// 要每次读取excel都要new,然后里面用到spring可以构造方法传进去</span><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TableListener</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">ReadListener</span>&lt;UserInfo&gt; &#123;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 这个每一条数据解析都会来调用</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> data    one row value. Is is same as &#123;<span class="hljs-doctag">@link</span> AnalysisContext#readRowHolder()&#125;</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> context</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">invoke</span><span class="hljs-params">(UserInfo data, AnalysisContext context)</span> &#123;<br>        log.info(<span class="hljs-string">&quot;解析到一条数据:&#123;&#125;&quot;</span>, data);<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 所有数据解析完成了 都会来调用</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> context</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">doAfterAllAnalysed</span><span class="hljs-params">(AnalysisContext context)</span> &#123;<br>        log.info(<span class="hljs-string">&quot;所有数据解析完成！&quot;</span>);<br>    &#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在-resources下导入一张Excel表格testExcel-xlsx"><a href="#在-resources下导入一张Excel表格testExcel-xlsx" class="headerlink" title="在/resources下导入一张Excel表格testExcel.xlsx"></a>在/resources下导入一张Excel表格testExcel.xlsx</h5></li>
<li><h5 id="读取表中数据，这里有两种方式"><a href="#读取表中数据，这里有两种方式" class="headerlink" title="读取表中数据，这里有两种方式:"></a>读取表中数据，这里有两种方式:</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ImportExcel</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 指定列的下标或者列名</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">main</span><span class="hljs-params">(String[] args)</span> &#123;<br>        readByListener();<br>        synchronousRead();<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="方法一：使用监听器"><a href="#方法一：使用监听器" class="headerlink" title="方法一：使用监听器"></a>方法一：使用监听器</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 监听器</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">readByListener</span><span class="hljs-params">()</span> &#123;<br>       <span class="hljs-type">String</span> <span class="hljs-variable">fileName</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;D:\\Project\\星球项目\\ClientCenter\\user-center\\src\\main\\resources\\testExcel.xlsx&quot;</span>;<br>       <span class="hljs-comment">// 这里默认读取第一个sheet</span><br>       EasyExcel.read(fileName, UserInfo.class, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TableListener</span>()).sheet().doRead();<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="方法二：同步返回"><a href="#方法二：同步返回" class="headerlink" title="方法二：同步返回"></a>方法二：同步返回</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 同步的返回，不推荐使用，如果数据量大会把数据放到内存里面</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">synchronousRead</span><span class="hljs-params">()</span> &#123;<br>       <span class="hljs-type">String</span> <span class="hljs-variable">fileName</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;D:\\Project\\星球项目\\ClientCenter\\user-center\\src\\main\\resources\\testExcel.xlsx&quot;</span>;<br>       List&lt;UserInfo&gt; list = EasyExcel.read(fileName).head(UserInfo.class).sheet().doReadSync();<br>       <span class="hljs-keyword">for</span> (UserInfo data : list) &#123;<br>           log.info(<span class="hljs-string">&quot;读取到数据:&#123;&#125;&quot;</span>, data);<br>       &#125;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="要了解这两者的区别和优缺点，请移步至鱼皮的开发文档"><a href="#要了解这两者的区别和优缺点，请移步至鱼皮的开发文档" class="headerlink" title="要了解这两者的区别和优缺点，请移步至鱼皮的开发文档"></a>要了解这两者的区别和优缺点，请移步至鱼皮的开发文档</h5></li>
<li><h5 id="执行main方法，成功地读取到了Excel表的数据，如下"><a href="#执行main方法，成功地读取到了Excel表的数据，如下" class="headerlink" title="执行main方法，成功地读取到了Excel表的数据，如下"></a>执行main方法，成功地读取到了Excel表的数据，如下</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-number">22</span>:<span class="hljs-number">42</span>:<span class="hljs-number">23.479</span> [main] INFO com.memory.usercenter.once.ImportExcel - 读取到数据:UserInfo(planetCode=<span class="hljs-number">1</span>, username=邓哈哈)<br><span class="hljs-number">22</span>:<span class="hljs-number">42</span>:<span class="hljs-number">23.491</span> [main] INFO com.memory.usercenter.once.ImportExcel - 读取到数据:UserInfo(planetCode=<span class="hljs-number">2</span>, username=邓呵呵)<br><span class="hljs-number">22</span>:<span class="hljs-number">42</span>:<span class="hljs-number">23.491</span> [main] INFO com.memory.usercenter.once.ImportExcel - 读取到数据:UserInfo(planetCode=<span class="hljs-number">3</span>, username=邓嘻嘻)<br><span class="hljs-number">22</span>:<span class="hljs-number">42</span>:<span class="hljs-number">23.492</span> [main] INFO com.memory.usercenter.once.ImportExcel - 读取到数据:UserInfo(planetCode=<span class="hljs-number">4</span>, username=邓哇哇)<br><span class="hljs-number">22</span>:<span class="hljs-number">42</span>:<span class="hljs-number">23.492</span> [main] INFO com.memory.usercenter.once.ImportExcel - 读取到数据:UserInfo(planetCode=<span class="hljs-number">5</span>, username=邓几把)<br></code></pre></td></tr></table></figure>

<h2 id="根据标签搜索用户"><a href="#根据标签搜索用户" class="headerlink" title="根据标签搜索用户"></a>根据标签搜索用户</h2><ul>
<li><h5 id="搜索到的用户总得展示吧，那么我们先做一个用户列表页"><a href="#搜索到的用户总得展示吧，那么我们先做一个用户列表页" class="headerlink" title="搜索到的用户总得展示吧，那么我们先做一个用户列表页"></a>搜索到的用户总得展示吧，那么我们先做一个用户列表页</h5></li>
<li><h5 id="写一个搜索按钮，用来携带已选中标签信息，获取符合要求用户，并跳转到用户列表页展示-不要纠结样式"><a href="#写一个搜索按钮，用来携带已选中标签信息，获取符合要求用户，并跳转到用户列表页展示-不要纠结样式" class="headerlink" title="写一个搜索按钮，用来携带已选中标签信息，获取符合要求用户，并跳转到用户列表页展示,不要纠结样式"></a>写一个搜索按钮，用来携带已选中标签信息，获取符合要求用户，并跳转到用户列表页展示,不要纠结样式</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 搜索 --&gt;<br>&lt;van-button<br>  type=&quot;primary&quot;<br>  style=&quot;margin: 8px; padding: 20px&quot;<br>  @click=&quot;doSearch()&quot;<br>  &gt;搜索&lt;/van-button<br>&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="先不谈发送请求，这里我们先实现跳转吧，很简单"><a href="#先不谈发送请求，这里我们先实现跳转吧，很简单" class="headerlink" title="先不谈发送请求，这里我们先实现跳转吧，很简单"></a>先不谈发送请求，这里我们先实现跳转吧，很简单</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 根据标签搜索, 向后台发送请求</span><br><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">doSearch</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">push</span>(&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/list&quot;</span>,<br>    <span class="hljs-attr">query</span>: &#123;<br>      <span class="hljs-attr">tags</span>: activeIds.<span class="hljs-property">value</span>,<br>    &#125;,<br>  &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="开发用户列表页-（Card-商品卡片）"><a href="#开发用户列表页-（Card-商品卡片）" class="headerlink" title="开发用户列表页   （Card 商品卡片）"></a>开发用户列表页   （Card 商品卡片）</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;van-card<br>  num=<span class="hljs-string">&quot;2&quot;</span><br>  price=<span class="hljs-string">&quot;2.00&quot;</span><br>  desc=<span class="hljs-string">&quot;描述信息&quot;</span><br>  title=<span class="hljs-string">&quot;商品标题&quot;</span><br>  thumb=<span class="hljs-string">&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;</span><br>&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">tags</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span><br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">footer</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span><br>&lt;/van-card&gt;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里再次console-log-打印一下，是可以拿到SearchPage页携带的选中的标签的"><a href="#这里再次console-log-打印一下，是可以拿到SearchPage页携带的选中的标签的" class="headerlink" title="这里再次console.log()打印一下，是可以拿到SearchPage页携带的选中的标签的"></a>这里再次console.log()打印一下，是可以拿到SearchPage页携带的选中的标签的</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> &#123; useRoute &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>();<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(route.<span class="hljs-property">query</span>);<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230404211104286.png" alt="image-20230404211104286"></p>
<ul>
<li><h5 id="筛选逻辑这里先不考虑，用假数据测试吧"><a href="#筛选逻辑这里先不考虑，用假数据测试吧" class="headerlink" title="筛选逻辑这里先不考虑，用假数据测试吧"></a>筛选逻辑这里先不考虑，用假数据测试吧</h5></li>
<li><h5 id="写个测试数据，也就是一个用户列表"><a href="#写个测试数据，也就是一个用户列表" class="headerlink" title="写个测试数据，也就是一个用户列表"></a>写个测试数据，也就是一个用户列表</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> users = [<br>  &#123;<br>    <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>    <span class="hljs-attr">userAccount</span>: <span class="hljs-string">&quot;memory&quot;</span>,<br>    <span class="hljs-attr">username</span>: <span class="hljs-string">&quot;邓哈哈&quot;</span>,<br>    <span class="hljs-attr">avatarUrl</span>: <span class="hljs-string">&quot;&quot;</span>,<br>    <span class="hljs-attr">gender</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>    <span class="hljs-attr">phone</span>: <span class="hljs-string">&quot;18887786754&quot;</span>,<br>    <span class="hljs-attr">email</span>: <span class="hljs-string">&quot;3348407547@qq.com&quot;</span>,<br>    <span class="hljs-attr">planetCode</span>: <span class="hljs-string">&quot;17625&quot;</span>,<br>    <span class="hljs-attr">createTime</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(),<br>    <span class="hljs-attr">profile</span>: <span class="hljs-string">&quot;这个用户很懒，什么也没写~&quot;</span>,<br>    <span class="hljs-attr">tags</span>: [<span class="hljs-string">&quot;java&quot;</span>, <span class="hljs-string">&quot;emo&quot;</span>, <span class="hljs-string">&quot;努力中&quot;</span>],<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>    <span class="hljs-attr">userAccount</span>: <span class="hljs-string">&quot;memory&quot;</span>,<br>    <span class="hljs-attr">username</span>: <span class="hljs-string">&quot;邓哈哈&quot;</span>,<br>    <span class="hljs-attr">avatarUrl</span>: <span class="hljs-string">&quot;&quot;</span>,<br>    <span class="hljs-attr">gender</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>    <span class="hljs-attr">phone</span>: <span class="hljs-string">&quot;18887786754&quot;</span>,<br>    <span class="hljs-attr">email</span>: <span class="hljs-string">&quot;3348407547@qq.com&quot;</span>,<br>    <span class="hljs-attr">planetCode</span>: <span class="hljs-string">&quot;17625&quot;</span>,<br>    <span class="hljs-attr">createTime</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(),<br>    <span class="hljs-attr">profile</span>: <span class="hljs-string">&quot;这个用户很懒，什么也没写~&quot;</span>,<br>    <span class="hljs-attr">tags</span>: [<span class="hljs-string">&quot;java&quot;</span>, <span class="hljs-string">&quot;emo&quot;</span>, <span class="hljs-string">&quot;努力中&quot;</span>],<br>  &#125;,<br>];<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="稍微修改一下，遍历users拿到每一个user，再正确显示user的属性，自己看着设计样式吧"><a href="#稍微修改一下，遍历users拿到每一个user，再正确显示user的属性，自己看着设计样式吧" class="headerlink" title="稍微修改一下，遍历users拿到每一个user，再正确显示user的属性，自己看着设计样式吧"></a>稍微修改一下，遍历users拿到每一个user，再正确显示user的属性，自己看着设计样式吧</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-card<br>   v-for=&quot;user in users&quot;<br>   :tag=&quot;user.gender&quot;<br>   :title=&quot;`$&#123;user.userAccount&#125; $&#123;user.username&#125; $&#123;user.planetCode&#125;`&quot;<br>   :desc=&quot;user.profile&quot;<br>   thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br> &gt;<br>   &lt;template #tags&gt;<br>     &lt;van-tag<br>       plain<br>       type=&quot;primary&quot;<br>       v-for=&quot;tag in user.tags&quot;<br>       style=&quot;margin-right: 3px; margin-top: 3px&quot;<br>     &gt;<br>       &#123;&#123; tag &#125;&#125;<br>     &lt;/van-tag&gt;<br>   &lt;/template&gt;<br>   &lt;template #footer&gt;<br>     &lt;van-button size=&quot;mini&quot;&gt;联系我&lt;/van-button&gt;<br>   &lt;/template&gt;<br> &lt;/van-card&gt;<br></code></pre></td></tr></table></figure>



<ul>
<li><h5 id="测试代码，开发完成"><a href="#测试代码，开发完成" class="headerlink" title="测试代码，开发完成"></a>测试代码，开发完成</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230404211229967.png" alt="image-20230404211229967"></p>
<ul>
<li><h5 id="接下来就是打通前后端，实现根据标签搜索用户"><a href="#接下来就是打通前后端，实现根据标签搜索用户" class="headerlink" title="接下来就是打通前后端，实现根据标签搜索用户"></a>接下来就是打通前后端，实现根据标签搜索用户</h5></li>
</ul>
<h2 id="根据标签查询（补充）"><a href="#根据标签查询（补充）" class="headerlink" title="根据标签查询（补充）"></a>根据标签查询（补充）</h2><ul>
<li><h5 id="我们先在表user中添加个新字段-profile"><a href="#我们先在表user中添加个新字段-profile" class="headerlink" title="我们先在表user中添加个新字段 profile"></a>我们先在表user中添加个新字段 profile</h5></li>
</ul>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs sql"><span class="hljs-comment">-- auto-generated definition</span><br><span class="hljs-keyword">create</span> <span class="hljs-keyword">table</span> <span class="hljs-keyword">user</span><br>(<br>    id            <span class="hljs-type">bigint</span>                                 <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;id&#x27;</span><br>        <span class="hljs-keyword">primary</span> key,<br>    user_account  <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;账号&#x27;</span>,<br>    username      <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;昵称&#x27;</span>,<br>    user_password <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>)                           <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;密码&#x27;</span>,<br>    avatar_url    <span class="hljs-type">varchar</span>(<span class="hljs-number">512</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;头像&#x27;</span>,<br>    gender        <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>) <span class="hljs-keyword">default</span> <span class="hljs-string">&#x27;0&#x27;</span>               <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;邮箱&#x27;</span>,<br>    phone         <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;电话&#x27;</span>,<br>    email         <span class="hljs-type">varchar</span>(<span class="hljs-number">128</span>)                           <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;邮箱&#x27;</span>,<br>    user_status   <span class="hljs-type">int</span>          <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;状态 0 - 正常&#x27;</span>,<br>    create_time   datetime     <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;创建时间&#x27;</span>,<br>    update_time   datetime     <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;更新时间&#x27;</span>,<br>    is_delete     tinyint      <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;是否删除 0 - 正常&#x27;</span>,<br>    user_role     <span class="hljs-type">int</span>(<span class="hljs-number">1</span>)       <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;用户权限 0 - 管理员 1 - 普通用户&#x27;</span>,<br>    planet_code   <span class="hljs-type">varchar</span>(<span class="hljs-number">512</span>)                           <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;星球编号&#x27;</span>,<br>    profile       <span class="hljs-type">varchar</span>(<span class="hljs-number">512</span>) <span class="hljs-keyword">default</span> <span class="hljs-string">&#x27;这个用户很懒，什么也没写~&#x27;</span>   <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;用户描述&#x27;</span>,<br>    tags          <span class="hljs-type">varchar</span>(<span class="hljs-number">1024</span>)                          <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;标签&#x27;</span><br>)<br>    comment <span class="hljs-string">&#x27;用户&#x27;</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="记得修改几处地方，这里就不一一演示了：-model-User，userMapper-xml，service下的-getSafetyUser-方法"><a href="#记得修改几处地方，这里就不一一演示了：-model-User，userMapper-xml，service下的-getSafetyUser-方法" class="headerlink" title="记得修改几处地方，这里就不一一演示了：/model/User，userMapper.xml，service下的 getSafetyUser()方法"></a>记得修改几处地方，这里就不一一演示了：/model/User，userMapper.xml，service下的 getSafetyUser()方法</h5></li>
<li><h5 id="controller层"><a href="#controller层" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 标签列表</span><br><span class="hljs-comment">   *</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> tagNameList</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@GetMapping(&quot;/search/tags&quot;)</span><br>  <span class="hljs-keyword">public</span> BaseResponse&lt;List&lt;User&gt;&gt; <span class="hljs-title function_">searchByTags</span><span class="hljs-params">(<span class="hljs-meta">@RequestParam</span> List&lt;String&gt; tagNameList)</span> &#123;<br>      <span class="hljs-keyword">if</span> (CollectionUtils.isEmpty(tagNameList))<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR);<br><br>      List&lt;User&gt; userList = userService.searchUserByTags(tagNameList);<br>      <span class="hljs-keyword">return</span> ResultUtils.success(userList);<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="接下来我们要在前端页面发送请求了，跟着官网来，安装axios"><a href="#接下来我们要在前端页面发送请求了，跟着官网来，安装axios" class="headerlink" title="接下来我们要在前端页面发送请求了，跟着官网来，安装axios"></a>接下来我们要在前端页面发送请求了，跟着官网来，安装axios</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs apl">yarn add axios<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在-plugins-myAxios-ts下配置-myAxios-和请求拦截器、响应拦截器，"><a href="#在-plugins-myAxios-ts下配置-myAxios-和请求拦截器、响应拦截器，" class="headerlink" title="在/plugins/myAxios.ts下配置 myAxios 和请求拦截器、响应拦截器，"></a>在/plugins/myAxios.ts下配置 myAxios 和请求拦截器、响应拦截器，</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;axios&quot;</span>;<br><span class="hljs-comment">// Set config defaults when creating the instance</span><br><span class="hljs-keyword">const</span> myAxios = axios.<span class="hljs-title function_">create</span>(&#123;<br>  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">&quot;http://localhost:8081/api&quot;</span>,<br>&#125;);<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 添加请求拦截器</span><br>axios.<span class="hljs-property">interceptors</span>.<span class="hljs-property">request</span>.<span class="hljs-title function_">use</span>(<br>  <span class="hljs-keyword">function</span> (<span class="hljs-params">config</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`我他妈发请求了<span class="hljs-subst">$&#123;config&#125;</span>`</span>);<br>    <span class="hljs-comment">// 在发送请求之前做些什么</span><br>    <span class="hljs-keyword">return</span> config;<br>  &#125;,<br>  <span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>    <span class="hljs-comment">// 对请求错误做些什么</span><br>    <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error);<br>  &#125;<br>);<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 添加响应拦截器</span><br>axios.<span class="hljs-property">interceptors</span>.<span class="hljs-property">response</span>.<span class="hljs-title function_">use</span>(<br>  <span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`我他妈响应了 <span class="hljs-subst">$&#123;response&#125;</span>`</span>);<br>    <span class="hljs-comment">// 对响应数据做点什么</span><br>    <span class="hljs-keyword">return</span> response;<br>  &#125;,<br>  <span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>    <span class="hljs-comment">// 对响应错误做点什么</span><br>    <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error);<br>  &#125;<br>);<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> myAxios;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在userListPage-vue下写个钩子函数，发送请求到后端"><a href="#在userListPage-vue下写个钩子函数，发送请求到后端" class="headerlink" title="在userListPage.vue下写个钩子函数，发送请求到后端"></a>在userListPage.vue下写个钩子函数，发送请求到后端</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> &#123; onMounted &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; useRoute &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> qs <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;qs&quot;</span>;<br><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>  <span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>();<br>  <span class="hljs-keyword">const</span> &#123; tags &#125; = route.<span class="hljs-property">query</span>;<br>  <span class="hljs-comment">// 上面的请求也可以这样做</span><br>  myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/search/tags&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">tagNameList</span>: tags,<br>      &#125;,<br>      <span class="hljs-attr">paramsSerializer</span>: &#123;<br>        <span class="hljs-attr">serialize</span>: <span class="hljs-function">(<span class="hljs-params">params</span>) =&gt;</span> qs.<span class="hljs-title function_">stringify</span>(params, &#123; <span class="hljs-attr">indices</span>: <span class="hljs-literal">false</span> &#125;),<br>      &#125;,<br>    &#125;)<br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response);<br>    &#125;)<br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="简单介绍一下运作原理"><a href="#简单介绍一下运作原理" class="headerlink" title="简单介绍一下运作原理"></a>简单介绍一下运作原理</h5></li>
<li><h5 id="钩子函数不用多废话了"><a href="#钩子函数不用多废话了" class="headerlink" title="钩子函数不用多废话了"></a>钩子函数不用多废话了</h5></li>
<li><h5 id="引入我们的myAxios，发送请求，语法要熟悉"><a href="#引入我们的myAxios，发送请求，语法要熟悉" class="headerlink" title="引入我们的myAxios，发送请求，语法要熟悉"></a>引入我们的myAxios，发送请求，语法要熟悉</h5></li>
<li><h5 id="引入-userRoute，拿到searchPage页携带的标签列表，语法要熟悉"><a href="#引入-userRoute，拿到searchPage页携带的标签列表，语法要熟悉" class="headerlink" title="引入 userRoute，拿到searchPage页携带的标签列表，语法要熟悉"></a>引入 userRoute，拿到searchPage页携带的标签列表，语法要熟悉</h5></li>
<li><h5 id="然后就是引入-qs-可以正确地在axios请求中携带数组参数发送到后端，详情还需去百度了解"><a href="#然后就是引入-qs-可以正确地在axios请求中携带数组参数发送到后端，详情还需去百度了解" class="headerlink" title="然后就是引入 qs , 可以正确地在axios请求中携带数组参数发送到后端，详情还需去百度了解"></a>然后就是引入 qs , 可以正确地在axios请求中携带数组参数发送到后端，详情还需去百度了解</h5></li>
<li><h5 id="这里我还踩了两个坑，补充说明一下吧："><a href="#这里我还踩了两个坑，补充说明一下吧：" class="headerlink" title="这里我还踩了两个坑，补充说明一下吧："></a>这里我还踩了两个坑，补充说明一下吧：</h5></li>
</ul>
<ol>
<li><h5 id="axios配置baseURL时，我给配成了-“https-localhost-8081-api-quot-，把http写成了https，导致响应状态码一直是500，唉"><a href="#axios配置baseURL时，我给配成了-“https-localhost-8081-api-quot-，把http写成了https，导致响应状态码一直是500，唉" class="headerlink" title="axios配置baseURL时，我给配成了 “https://localhost:8081/api&quot;，把http写成了https，导致响应状态码一直是500，唉"></a>axios配置baseURL时，我给配成了 “<a target="_blank" rel="noopener" href="https://localhost:8081/api&quot;%EF%BC%8C%E6%8A%8Ahttp%E5%86%99%E6%88%90%E4%BA%86https%EF%BC%8C%E5%AF%BC%E8%87%B4%E5%93%8D%E5%BA%94%E7%8A%B6%E6%80%81%E7%A0%81%E4%B8%80%E7%9B%B4%E6%98%AF500%EF%BC%8C%E5%94%89">https://localhost:8081/api&quot;，把http写成了https，导致响应状态码一直是500，唉</a></h5></li>
<li><h5 id="然后就是-qs-了，坑死我了，先介绍一下-qs-引入流程："><a href="#然后就是-qs-了，坑死我了，先介绍一下-qs-引入流程：" class="headerlink" title="然后就是 qs 了，坑死我了，先介绍一下 qs 引入流程："></a>然后就是 qs 了，坑死我了，先介绍一下 qs 引入流程：</h5></li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs apl">yarn add qs<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> qs <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;qs&quot;</span>;<br><br><span class="hljs-comment">// 旧版</span><br><span class="hljs-attr">paramsSerializer</span>: <span class="hljs-function">(<span class="hljs-params">params</span>) =&gt;</span> &#123;<br>  <span class="hljs-keyword">return</span> qs.<span class="hljs-title function_">stringify</span>(params, &#123;<span class="hljs-attr">arrayFormat</span>: <span class="hljs-string">&#x27;repeat&#x27;</span>&#125;)<br>&#125;<br><br><span class="hljs-comment">// 新版</span><br><span class="hljs-attr">paramsSerializer</span>: &#123;<br>        <span class="hljs-attr">serialize</span>: <span class="hljs-function">(<span class="hljs-params">params</span>) =&gt;</span> qs.<span class="hljs-title function_">stringify</span>(params, &#123; <span class="hljs-attr">indices</span>: <span class="hljs-literal">false</span> &#125;),<br>      &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="我他妈就用了旧版，半天都不能正确发送请求，那用户列表页还他么卡死"><a href="#我他妈就用了旧版，半天都不能正确发送请求，那用户列表页还他么卡死" class="headerlink" title="我他妈就用了旧版，半天都不能正确发送请求，那用户列表页还他么卡死"></a>我他妈就用了旧版，半天都不能正确发送请求，那用户列表页还他么卡死</h5></li>
<li><h5 id="好了，请求成功发送了"><a href="#好了，请求成功发送了" class="headerlink" title="好了，请求成功发送了"></a>好了，请求成功发送了</h5></li>
</ul>
<h1 id="打通前后端查询用户"><a href="#打通前后端查询用户" class="headerlink" title="打通前后端查询用户"></a>打通前后端查询用户</h1><ul>
<li><h5 id="发送请求成功后，后端接口成功返回包含对应标签的用户（具体逻辑实现看-gt-后端接口开发）"><a href="#发送请求成功后，后端接口成功返回包含对应标签的用户（具体逻辑实现看-gt-后端接口开发）" class="headerlink" title="发送请求成功后，后端接口成功返回包含对应标签的用户（具体逻辑实现看 =&gt; 后端接口开发）"></a>发送请求成功后，后端接口成功返回包含对应标签的用户（具体逻辑实现看 =&gt; 后端接口开发）</h5></li>
<li><h5 id="发送请求逻辑我们已经写好了，接下来就是响应后端发回数据的逻辑了"><a href="#发送请求逻辑我们已经写好了，接下来就是响应后端发回数据的逻辑了" class="headerlink" title="发送请求逻辑我们已经写好了，接下来就是响应后端发回数据的逻辑了"></a>发送请求逻辑我们已经写好了，接下来就是响应后端发回数据的逻辑了</h5></li>
<li><h5 id="我们在钩子函数前后写上："><a href="#我们在钩子函数前后写上：" class="headerlink" title="我们在钩子函数前后写上："></a>我们在钩子函数前后写上：</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> &#123;ref&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><br><span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>();<br><span class="hljs-keyword">const</span> &#123; tags &#125; = route.<span class="hljs-property">query</span>;<br><span class="hljs-keyword">const</span> userList = <span class="hljs-title function_">ref</span>([]);<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-title function_">onMounted</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>  <span class="hljs-comment">// 响应数据</span><br>  <span class="hljs-keyword">const</span> userListData = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/search/tags&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">tagNameList</span>: tags,<br>      &#125;,<br>      <span class="hljs-attr">paramsSerializer</span>: &#123;<br>        <span class="hljs-attr">serialize</span>: <span class="hljs-function">(<span class="hljs-params">params</span>) =&gt;</span> qs.<span class="hljs-title function_">stringify</span>(params, &#123; <span class="hljs-attr">indices</span>: <span class="hljs-literal">false</span> &#125;),<br>      &#125;,<br>    &#125;)<br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response);<br>        <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>?.<span class="hljs-property">data</span>;<br>    &#125;)<br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-keyword">if</span> (userListData) &#123;<br>    userListData.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">user: <span class="hljs-built_in">any</span></span>) =&gt;</span> &#123;<br>      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> == <span class="hljs-number">1</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;男&quot;</span>;<br>      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> == <span class="hljs-number">0</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;女&quot;</span>;<br><br>      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">tags</span>) user.<span class="hljs-property">tags</span> = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(user.<span class="hljs-property">tags</span>);<br>    &#125;);<br>  &#125;<br>  userList.<span class="hljs-property">value</span> = userListData;<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这块儿实现了什么逻辑呢，简单讲讲："><a href="#这块儿实现了什么逻辑呢，简单讲讲：" class="headerlink" title="这块儿实现了什么逻辑呢，简单讲讲："></a>这块儿实现了什么逻辑呢，简单讲讲：</h5></li>
</ul>
<ol>
<li><h5 id="返回了响应数据，返回的用户列表是Json字符串，我们把它序列化为列表-userList"><a href="#返回了响应数据，返回的用户列表是Json字符串，我们把它序列化为列表-userList" class="headerlink" title="返回了响应数据，返回的用户列表是Json字符串，我们把它序列化为列表 userList"></a>返回了响应数据，返回的用户列表是Json字符串，我们把它序列化为列表 userList</h5></li>
<li><h5 id="将用户信息中的性别显示为-‘男’-‘女’"><a href="#将用户信息中的性别显示为-‘男’-‘女’" class="headerlink" title="将用户信息中的性别显示为 ‘男’  ‘女’"></a>将用户信息中的性别显示为 ‘男’  ‘女’</h5></li>
</ol>
<ul>
<li><h5 id="再修改一下表数据，之前我们用的是假数据"><a href="#再修改一下表数据，之前我们用的是假数据" class="headerlink" title="再修改一下表数据，之前我们用的是假数据"></a>再修改一下表数据，之前我们用的是假数据</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-card<br>   v-for=&quot;user in userList&quot;<br>   :tag=&quot;`$&#123;user.gender&#125;`&quot;<br>   :title=&quot;`$&#123;user.userAccount&#125; $&#123;user.username&#125; $&#123;user.planetCode&#125;`&quot;<br>   :desc=&quot;user.profile&quot;<br>   thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br> &gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="好极了，我们根据-‘男’-标签，搜索用户，得到了正确结果"><a href="#好极了，我们根据-‘男’-标签，搜索用户，得到了正确结果" class="headerlink" title="好极了，我们根据 ‘男’ 标签，搜索用户，得到了正确结果"></a>好极了，我们根据 ‘男’ 标签，搜索用户，得到了正确结果</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230405150346771.png" alt="image-20230405150346771"></p>
<h1 id="Session共享实现"><a href="#Session共享实现" class="headerlink" title="Session共享实现"></a>Session共享实现</h1><ul>
<li><h5 id="用来实现在多台服务器之间共享登录态"><a href="#用来实现在多台服务器之间共享登录态" class="headerlink" title="用来实现在多台服务器之间共享登录态"></a>用来实现在多台服务器之间共享登录态</h5></li>
<li><h5 id="安装redis-Redis-5-0-14-下载："><a href="#安装redis-Redis-5-0-14-下载：" class="headerlink" title="安装redis  Redis 5.0.14 下载："></a>安装redis  Redis 5.0.14 下载：</h5></li>
</ul>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs awk">链接：https:<span class="hljs-regexp">//</span>pan.baidu.com<span class="hljs-regexp">/s/</span><span class="hljs-number">1</span>XcsAIrdeesQAyQU2lE3cOg<br>提取码：vkoi <br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="安装quick-redis"><a href="#安装quick-redis" class="headerlink" title="安装quick-redis"></a>安装quick-redis</h5></li>
</ul>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs awk">quick redis：https:<span class="hljs-regexp">//</span>quick123.net/<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="引入redis，能够操作-redis："><a href="#引入redis，能够操作-redis：" class="headerlink" title="引入redis，能够操作 redis："></a>引入redis，能够操作 redis：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs java">&lt;!-- https:<span class="hljs-comment">//mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-redis --&gt;</span><br>&lt;dependency&gt;<br>    &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;<br>    &lt;artifactId&gt;spring-boot-starter-data-redis&lt;/artifactId&gt;<br>    &lt;version&gt;<span class="hljs-number">2.6</span><span class="hljs-number">.4</span>&lt;/version&gt;<br>&lt;/dependency&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="引入-spring-session-和-redis-的整合-使得自动将-session-存储到-redis-中："><a href="#引入-spring-session-和-redis-的整合-使得自动将-session-存储到-redis-中：" class="headerlink" title="引入 spring-session 和 redis 的整合    使得自动将 session 存储到 redis 中："></a>引入 spring-session 和 redis 的整合    使得自动将 session 存储到 redis 中：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs java">&lt;!-- https:<span class="hljs-comment">//mvnrepository.com/artifact/org.springframework.session/spring-session-data-redis --&gt;</span><br>&lt;dependency&gt;<br>    &lt;groupId&gt;org.springframework.session&lt;/groupId&gt;<br>    &lt;artifactId&gt;spring-session-data-redis&lt;/artifactId&gt;<br>    &lt;version&gt;<span class="hljs-number">2.6</span><span class="hljs-number">.3</span>&lt;/version&gt;<br>&lt;/dependency&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="修改-spring-session-存储配置-spring-session-store-type"><a href="#修改-spring-session-存储配置-spring-session-store-type" class="headerlink" title="修改 spring-session 存储配置 spring.session.store-type"></a>修改 spring-session 存储配置 <code>spring.session.store-type</code></h5></li>
<li><h5 id="默认是-none，表示存储在单台服务器"><a href="#默认是-none，表示存储在单台服务器" class="headerlink" title="默认是 none，表示存储在单台服务器"></a>默认是 none，表示存储在单台服务器</h5></li>
<li><h5 id="store-type-redis，表示从-redis-读写-session"><a href="#store-type-redis，表示从-redis-读写-session" class="headerlink" title="store-type: redis，表示从 redis 读写 session"></a>store-type: redis，表示从 redis 读写 session</h5></li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">spring:</span><br><span class="hljs-comment"># session 失效时间(分钟)</span><br>	<span class="hljs-attr">session:</span><br>  	<span class="hljs-attr">timeout:</span> <span class="hljs-number">86640</span><br>  	<span class="hljs-attr">store-type:</span> <span class="hljs-string">redis</span><br><span class="hljs-comment"># redis 配置</span><br>	<span class="hljs-attr">redis:</span><br>  	<span class="hljs-attr">port:</span> <span class="hljs-number">6379</span><br>  	<span class="hljs-attr">host:</span> <span class="hljs-string">localhost</span><br>  	<span class="hljs-attr">database:</span> <span class="hljs-number">0</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="完成"><a href="#完成" class="headerlink" title="完成!"></a>完成!</h5></li>
<li><h5 id="现在登录态已经可以写入redis了，还是共享的"><a href="#现在登录态已经可以写入redis了，还是共享的" class="headerlink" title="现在登录态已经可以写入redis了，还是共享的"></a>现在登录态已经可以写入redis了，还是共享的</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230405204848156.png" alt="image-20230405204848156"></p>
<ul>
<li><h5 id="接下来就要实现用户登录、用户信息展示、修改用户信息，但涉及到了跨域问题"><a href="#接下来就要实现用户登录、用户信息展示、修改用户信息，但涉及到了跨域问题" class="headerlink" title="接下来就要实现用户登录、用户信息展示、修改用户信息，但涉及到了跨域问题"></a>接下来就要实现用户登录、用户信息展示、修改用户信息，但涉及到了跨域问题</h5></li>
<li><h5 id="这块login后，后端种下了session，但axios发送请求时，老是携带不到cookie，getCurrentUser-获取不到当前用户登录态"><a href="#这块login后，后端种下了session，但axios发送请求时，老是携带不到cookie，getCurrentUser-获取不到当前用户登录态" class="headerlink" title="这块login后，后端种下了session，但axios发送请求时，老是携带不到cookie，getCurrentUser()获取不到当前用户登录态"></a>这块login后，后端种下了session，但axios发送请求时，老是携带不到cookie，getCurrentUser()获取不到当前用户登录态</h5></li>
<li><h5 id="先做后边的功能吧，这一块儿我再研究研究，这个跨域携带cookie好像挺难搞定"><a href="#先做后边的功能吧，这一块儿我再研究研究，这个跨域携带cookie好像挺难搞定" class="headerlink" title="先做后边的功能吧，这一块儿我再研究研究，这个跨域携带cookie好像挺难搞定"></a>先做后边的功能吧，这一块儿我再研究研究，这个跨域携带cookie好像挺难搞定</h5></li>
<li><h5 id="axios不能成功携带cookie的话，上面的需求都做不了"><a href="#axios不能成功携带cookie的话，上面的需求都做不了" class="headerlink" title="axios不能成功携带cookie的话，上面的需求都做不了"></a>axios不能成功携带cookie的话，上面的需求都做不了</h5></li>
<li><h5 id="三天后老子回来了，爷爷解决问题了！那么接下来，就让我捋一捋这个周末都学到了些什么吧！"><a href="#三天后老子回来了，爷爷解决问题了！那么接下来，就让我捋一捋这个周末都学到了些什么吧！" class="headerlink" title="三天后老子回来了，爷爷解决问题了！那么接下来，就让我捋一捋这个周末都学到了些什么吧！"></a>三天后老子回来了，爷爷解决问题了！那么接下来，就让我捋一捋这个周末都学到了些什么吧！</h5></li>
</ul>
<h1 id="后端接口开发-1"><a href="#后端接口开发-1" class="headerlink" title="后端接口开发"></a>后端接口开发</h1><h2 id="修改用户信息"><a href="#修改用户信息" class="headerlink" title="修改用户信息"></a>修改用户信息</h2><ul>
<li><h5 id="后端-service层"><a href="#后端-service层" class="headerlink" title="后端    service层"></a>后端    service层</h5></li>
<li><h5 id="实现思路："><a href="#实现思路：" class="headerlink" title="实现思路："></a>实现思路：</h5></li>
<li><h5 id="管理员修改用户接口"><a href="#管理员修改用户接口" class="headerlink" title="管理员修改用户接口"></a>管理员修改用户接口</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 管理员修改用户信息</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> user</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">userUpdateByAdmin</span><span class="hljs-params">(User user)</span> &#123;<br>        userMapper.updateById(user);<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;修改信息成功&quot;</span>;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="用户普通用户修改用户接口"><a href="#用户普通用户修改用户接口" class="headerlink" title="用户普通用户修改用户接口"></a>用户普通用户修改用户接口</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 修改用户信息</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> user      要修改的用户</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> loginUser 当前登录用户</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 修改接过信息</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> String <span class="hljs-title function_">userUpdate</span><span class="hljs-params">(User user, User loginUser)</span> &#123;<br>       <span class="hljs-comment">// 1.1.校验管理员权限</span><br>       <span class="hljs-keyword">if</span> (isAdmin(loginUser)) &#123;<br>           <span class="hljs-comment">// 1.2.如果是管理员, 就跳转到管理员修改用户接口, 执行修改并返回结果</span><br>           <span class="hljs-keyword">return</span> userUpdateByAdmin(user);<br>       &#125;<br><br>       <span class="hljs-comment">// 1.3.非管理员, 就执行普通用户修改用户方法</span><br>       <span class="hljs-comment">// 根据传回来的id, 判断当前用户是否为要修改的用户</span><br>       <span class="hljs-keyword">if</span> (!loginUser.getId().equals(user.getId()))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(NO_AUTH);<br><br>       userMapper.updateById(user);<br>       <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;修改信息成功&quot;</span>;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里我们在service层封装了两个-isAdmin-方法"><a href="#这里我们在service层封装了两个-isAdmin-方法" class="headerlink" title="这里我们在service层封装了两个 isAdmin() 方法"></a>这里我们在service层封装了两个 isAdmin() 方法</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> loginUser 校验的用户</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span> 校验成功与否(t / f)</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@Override</span><br>  <span class="hljs-keyword">public</span> Boolean <span class="hljs-title function_">isAdmin</span><span class="hljs-params">(User loginUser)</span> &#123;<br>      <span class="hljs-comment">//校验是否为管理员</span><br>      <span class="hljs-keyword">return</span> loginUser != <span class="hljs-literal">null</span> &amp;&amp; loginUser.getUserRole() == ADMIN_ROLE;<br>  &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 校验是否为管理员</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 校验成功与否(t / f)</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-keyword">public</span> Boolean <span class="hljs-title function_">isAdmin</span><span class="hljs-params">(HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">//校验是否为管理员</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> (User) request.getSession().getAttribute(USER_LOGIN_STATE);<br>       <span class="hljs-keyword">return</span> user != <span class="hljs-literal">null</span> &amp;&amp; user.getUserRole() == ADMIN_ROLE;<br>   &#125;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="顺带的，我们整理了所有的-controller层-和-service层的代码，最终呈现出统一格式："><a href="#顺带的，我们整理了所有的-controller层-和-service层的代码，最终呈现出统一格式：" class="headerlink" title="顺带的，我们整理了所有的 controller层 和 service层的代码，最终呈现出统一格式："></a>顺带的，我们整理了所有的 controller层 和 service层的代码，最终呈现出统一格式：</h5></li>
<li><h5 id="controller-层负责：简单校验参数-—-gt-调用service层的接口代码-—-gt-通用返回结果"><a href="#controller-层负责：简单校验参数-—-gt-调用service层的接口代码-—-gt-通用返回结果" class="headerlink" title="controller 层负责：简单校验参数 —&gt; 调用service层的接口代码 —&gt;通用返回结果"></a>controller 层负责：简单校验参数 —&gt; 调用service层的接口代码 —&gt;通用返回结果</h5></li>
<li><h5 id="service-层负责：实现全部的业务逻辑代码"><a href="#service-层负责：实现全部的业务逻辑代码" class="headerlink" title="service 层负责：实现全部的业务逻辑代码"></a>service 层负责：实现全部的业务逻辑代码</h5></li>
<li><h5 id="整个项目结构就变得很清晰了，那我们简单展示一下现在的-项目结构-和-代码规范-吧："><a href="#整个项目结构就变得很清晰了，那我们简单展示一下现在的-项目结构-和-代码规范-吧：" class="headerlink" title="整个项目结构就变得很清晰了，那我们简单展示一下现在的 项目结构 和 代码规范 吧："></a>整个项目结构就变得很清晰了，那我们简单展示一下现在的 项目结构 和 代码规范 吧：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><code class="hljs java">项目结构<br>|_ main<br>	|_ java<br>		|_ com.memory.usercenter<br>			|_ common<br>    			|_ BaseResponse.java<br>    			|_ ErrorCode.java<br>    			|_JacksonObjectMapper.java<br>    			|_ ResultUtils.java<br>			|_ config<br>    			|_ Knif4jConfiguration.java<br>    			|_ MyIntercepter.java<br>   				|_ WebConfig.java<br>			|_ constant<br>    			|_ UserConstant.java<br>    		|_ controller<br>    			|_UserCtroller.java<br>			|_ exception<br>    			|_ BusinessException.java<br>    			|_ GlobalExceptionHandler.java<br>			|_ mapper<br>    			|_ UserMapper.java<br>			|_ model<br>    			|_ request<br>    				|_ UserLoginRequest.java<br>    				|_ UserRegisterRequest.java<br>    			|_ User<br>			|_ once<br>    			|_ ImportExcel.java<br>    			|_ InsertUser.java<br>    			|_ TableListener.java<br>    			|_UserInfo.java<br>			|_ service<br>    			|_ impl<br>    				|_ UserServiceImpl.java<br>    			|_ UserService.java<br>			|_ util<br>			|_ UserCenterApplication.java<br>	|_ resources<br>			|_ mapper <br>    			|_ UserMapper.xml<br>			|_ application.yaml<br>			|_ testExcel.xlsx<br>|_ test<br>	|_ java<br>    	|_ com.memory.usercenter<br>    		...................<br>|_ target<br>|_ pom.xml<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h5></li>
<li><h5 id="修改用户信息，我们提到了要校验在线用户权限对吧，这个在线用户登录态我们在用户中心里做过，但伙伴匹配还未实现，所以在实现接下来，我们先实现登录和记录用户登录态功能"><a href="#修改用户信息，我们提到了要校验在线用户权限对吧，这个在线用户登录态我们在用户中心里做过，但伙伴匹配还未实现，所以在实现接下来，我们先实现登录和记录用户登录态功能" class="headerlink" title="修改用户信息，我们提到了要校验在线用户权限对吧，这个在线用户登录态我们在用户中心里做过，但伙伴匹配还未实现，所以在实现接下来，我们先实现登录和记录用户登录态功能"></a>修改用户信息，我们提到了要校验在线用户权限对吧，这个在线用户登录态我们在用户中心里做过，但伙伴匹配还未实现，所以在实现接下来，我们先实现登录和记录用户登录态功能</h5></li>
<li><h5 id="添加登录页路由"><a href="#添加登录页路由" class="headerlink" title="添加登录页路由"></a>添加登录页路由</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserLoginPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/UserLoginPage.vue&quot;</span>;<br><br><span class="hljs-keyword">const</span> routes = [<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">IndexPage</span> &#125;, <span class="hljs-comment">// 主页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamPage</span> &#125;, <span class="hljs-comment">// 队伍页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserPage</span> &#125;, <span class="hljs-comment">// 个人页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/search&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">SearchPage</span> &#125;, <span class="hljs-comment">// 搜索页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/edit&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserEditPage</span> &#125;, <span class="hljs-comment">// 用户信息修改页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/list&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserListPage</span> &#125;, <span class="hljs-comment">// 用户列表页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/login&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserLoginPage</span> &#125;, <span class="hljs-comment">// 用户登录页</span><br>];<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="借助组件开发用户登录页-Form表单"><a href="#借助组件开发用户登录页-Form表单" class="headerlink" title="借助组件开发用户登录页  Form表单"></a>借助组件开发用户登录页  Form表单</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;van-form @submit=&quot;onSubmit&quot;&gt;<br>    &lt;van-cell-group inset&gt;<br>      &lt;van-field<br>        v-model=&quot;userAccount&quot;<br>        name=&quot;用户名&quot;<br>        label=&quot;用户名&quot;<br>        placeholder=&quot;用户名&quot;<br>        :rules=&quot;[&#123; required: true, message: &#x27;请填写用户名&#x27; &#125;]&quot;<br>      /&gt;<br>      &lt;van-field<br>        v-model=&quot;userPassword&quot;<br>        type=&quot;password&quot;<br>        name=&quot;密码&quot;<br>        label=&quot;密码&quot;<br>        placeholder=&quot;密码&quot;<br>        :rules=&quot;[&#123; required: true, message: &#x27;请填写密码&#x27; &#125;]&quot;<br>      /&gt;<br>    &lt;/van-cell-group&gt;<br>    &lt;div style=&quot;margin: 16px&quot;&gt;<br>      &lt;van-button round block type=&quot;primary&quot; native-type=&quot;submit&quot;&gt;<br>        提交<br>      &lt;/van-button&gt;<br>    &lt;/div&gt;<br>  &lt;/van-form&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="发送登录请求"><a href="#发送登录请求" class="headerlink" title="发送登录请求"></a>发送登录请求</h5></li>
<li><h5 id="还记得之前封装好的MyAxios吧，与表单双向绑定后，携带-userAccount-userPassword-json字符串-发送至后端"><a href="#还记得之前封装好的MyAxios吧，与表单双向绑定后，携带-userAccount-userPassword-json字符串-发送至后端" class="headerlink" title="还记得之前封装好的MyAxios吧，与表单双向绑定后，携带 userAccount userPassword json字符串 发送至后端"></a>还记得之前封装好的MyAxios吧，与表单双向绑定后，携带 userAccount userPassword json字符串 发送至后端</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; showSuccessToast, showFailToast &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; requestData &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../models/user&quot;</span>;<br><br><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br><span class="hljs-keyword">const</span> userAccount = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-keyword">const</span> userPassword = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onSubmit</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">res</span>: requestData = <span class="hljs-keyword">await</span> myAxios.<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/user/login&quot;</span>, &#123;<br>    <span class="hljs-attr">userAccount</span>: userAccount.<span class="hljs-property">value</span>,<br>    <span class="hljs-attr">userPassword</span>: userPassword.<span class="hljs-property">value</span>,<br>  &#125;);<br><br>  <span class="hljs-keyword">if</span> (res.<span class="hljs-property">code</span> === <span class="hljs-number">0</span> &amp;&amp; res.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">&quot;登录成功&quot;</span>);<br>    <span class="hljs-comment">// 登录成功后跳转至主页</span><br>    router.<span class="hljs-title function_">push</span>(<span class="hljs-string">&quot;/&quot;</span>);<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">&quot;登录失败&quot;</span>);<br>  &#125;<br>&#125;;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="用户可以登录了，且登录后记录了用户登录态，将来可以获取到登录用户信息"><a href="#用户可以登录了，且登录后记录了用户登录态，将来可以获取到登录用户信息" class="headerlink" title="用户可以登录了，且登录后记录了用户登录态，将来可以获取到登录用户信息"></a>用户可以登录了，且登录后记录了用户登录态，将来可以获取到登录用户信息</h5></li>
<li><h5 id="我们在主页的钩子函数上实现一个功能，如果获取不到用户登录态，就跳转至登录页进行登录"><a href="#我们在主页的钩子函数上实现一个功能，如果获取不到用户登录态，就跳转至登录页进行登录" class="headerlink" title="我们在主页的钩子函数上实现一个功能，如果获取不到用户登录态，就跳转至登录页进行登录"></a>我们在主页的钩子函数上实现一个功能，如果获取不到用户登录态，就跳转至登录页进行登录</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 校验是否登录, 未登录则跳转至登录页;</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>  <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getCurrentUser</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res);<br>  <span class="hljs-keyword">if</span> (!res.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;未登录!&quot;</span>);<br>    router.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&quot;/user/login&quot;</span>);<br>  &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="类似的，我们可以在之后的展示当前用户信息、修改用户信息之前，获取当前用户登录态，以便对该用户进行权限校验"><a href="#类似的，我们可以在之后的展示当前用户信息、修改用户信息之前，获取当前用户登录态，以便对该用户进行权限校验" class="headerlink" title="类似的，我们可以在之后的展示当前用户信息、修改用户信息之前，获取当前用户登录态，以便对该用户进行权限校验"></a>类似的，我们可以在之后的展示当前用户信息、修改用户信息之前，获取当前用户登录态，以便对该用户进行权限校验</h5></li>
</ul>
<h2 id="展示当前用户信息"><a href="#展示当前用户信息" class="headerlink" title="展示当前用户信息"></a>展示当前用户信息</h2><ul>
<li><h5 id="我们要在多个页面上-获取当前用户登录态-来校验权限，所以我们先把这个方法封装起来"><a href="#我们要在多个页面上-获取当前用户登录态-来校验权限，所以我们先把这个方法封装起来" class="headerlink" title="我们要在多个页面上 获取当前用户登录态 来校验权限，所以我们先把这个方法封装起来"></a>我们要在多个页面上 获取当前用户登录态 来校验权限，所以我们先把这个方法封装起来</h5></li>
<li><h5 id="在-service-user-ts-下实现"><a href="#在-service-user-ts-下实现" class="headerlink" title="在 service/user.ts 下实现"></a>在 service/user.ts 下实现</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../plugins/myAxios&quot;</span>;<br><br><span class="hljs-comment">// 获取当前登录用户</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">getCurrentUser</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> myAxios.<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/currentUser&quot;</span>);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="那么这个方法就是封装好的-getCurrentUser-方法了"><a href="#那么这个方法就是封装好的-getCurrentUser-方法了" class="headerlink" title="那么这个方法就是封装好的 getCurrentUser() 方法了"></a>那么这个方法就是封装好的 getCurrentUser() 方法了</h5></li>
<li><h5 id="接下来，在UserPage下写一个钩子函数，获取当前用户并成功展示"><a href="#接下来，在UserPage下写一个钩子函数，获取当前用户并成功展示" class="headerlink" title="接下来，在UserPage下写一个钩子函数，获取当前用户并成功展示"></a>接下来，在UserPage下写一个钩子函数，获取当前用户并成功展示</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; onMounted &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; showSuccessToast, showFailToast &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; getCurrentUser &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../service/user&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> user = <span class="hljs-title function_">ref</span>();<br><span class="hljs-comment">// 钩子函数</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>  <span class="hljs-comment">// 发送获取当前登录用户请求</span><br>  <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getCurrentUser</span>();<br><br>  <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">&quot;获取用户信息成功&quot;</span>);<br>    user.<span class="hljs-property">value</span> = res.<span class="hljs-property">data</span>;<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">&quot;获取用户信息失败&quot;</span>);<br>  &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="顺便优化了表单显示效果：当获取到-user-数据就显示表单信息，否则显示空白页面-Empty"><a href="#顺便优化了表单显示效果：当获取到-user-数据就显示表单信息，否则显示空白页面-Empty" class="headerlink" title="顺便优化了表单显示效果：当获取到 user 数据就显示表单信息，否则显示空白页面 Empty"></a>顺便优化了表单显示效果：当获取到 user 数据就显示表单信息，否则显示空白页面 Empty</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;div v-if=&quot;user&quot;&gt;<br>    &lt;van-cell<br>      title=&quot;账号&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.userAccount&quot;<br>      @click=&quot;toEdit(&#x27;userAccount&#x27;, &#x27;账号&#x27;, user.userAccount)&quot;<br>    /&gt;vu<br>    &lt;van-cell<br>      title=&quot;昵称&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.username&quot;<br>      @click=&quot;toEdit(&#x27;username&#x27;, &#x27;昵称&#x27;, user.username)&quot;<br>    /&gt;<br>    &lt;van-cell<br>      title=&quot;头像&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.avatarUrl&quot;<br>      @click=&quot;toEdit(&#x27;avatarUrl&#x27;, &#x27;头像&#x27;, user.avatarUrl)&quot;<br>    /&gt;<br>    &lt;van-cell<br>      title=&quot;性别&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.gender&quot;<br>      @click=&quot;toEdit(&#x27;gender&#x27;, &#x27;性别&#x27;, user.gender)&quot;<br>    /&gt;<br>    &lt;van-cell<br>      title=&quot;电话&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.phone&quot;<br>      @click=&quot;toEdit(&#x27;phone&#x27;, &#x27;电话&#x27;, user.phone)&quot;<br>    /&gt;<br>    &lt;van-cell<br>      title=&quot;邮箱&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.email&quot;<br>      @click=&quot;toEdit(&#x27;email&#x27;, &#x27;邮箱&#x27;, user.email)&quot;<br>    /&gt;<br>    &lt;van-cell<br>      title=&quot;星球编号&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.planetCode&quot;<br>      @click=&quot;toEdit(&#x27;planetCode&#x27;, &#x27;星球编号&#x27;, user.planetCode)&quot;<br>    /&gt;<br>    &lt;van-cell<br>      title=&quot;注册时间&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.createTime&quot;<br>      @click=&quot;toEdit(&#x27;createTime&#x27;, &#x27;注册时间&#x27;, user.createTime)&quot;<br>    /&gt;<br>     &lt;van-empty v-else description=&quot;获取用户信息失败&quot; /&gt;<br>  &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<h2 id="发送修改信息请求"><a href="#发送修改信息请求" class="headerlink" title="发送修改信息请求"></a>发送修改信息请求</h2><ul>
<li><h5 id="之前我们实现过-UserPage页-的数据传输到-UserEditPage页"><a href="#之前我们实现过-UserPage页-的数据传输到-UserEditPage页" class="headerlink" title="之前我们实现过 UserPage页 的数据传输到 UserEditPage页"></a>之前我们实现过 UserPage页 的数据传输到 UserEditPage页</h5></li>
<li><h5 id="这次实现成功修改用户信息"><a href="#这次实现成功修改用户信息" class="headerlink" title="这次实现成功修改用户信息"></a>这次实现成功修改用户信息</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">onSubmit</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">values: <span class="hljs-built_in">string</span></span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> currentUser = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getCurrentUser</span>();<br>  <span class="hljs-comment">//提交之前做校验</span><br>  <span class="hljs-keyword">if</span> (currentUser.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-comment">// 发送用户修改请求</span><br>    <span class="hljs-keyword">const</span> res = myAxios.<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/user/update&quot;</span>, &#123;<br>      <span class="hljs-attr">id</span>: currentUser.<span class="hljs-property">data</span>.<span class="hljs-property">id</span>,<br>      [editUser.<span class="hljs-property">value</span>.<span class="hljs-property">editKey</span> <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>]: editUser.<span class="hljs-property">value</span>.<span class="hljs-property">currentValue</span>,<br>    &#125;);<br>    <br>   <span class="hljs-keyword">if</span> (res.<span class="hljs-property">code</span> === <span class="hljs-number">0</span> &amp;&amp; res.<span class="hljs-property">data</span>) &#123;<br>     <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">&quot;修改成功&quot;</span>);<br>     router.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&quot;/user&quot;</span>);<br>    &#125;<br>  &#125;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="同样的，执行修改之前我们又获取了一把用户登录态，并将该用户-id-连同-修改字段-一并发送至后端，这样后端就可以鉴权了"><a href="#同样的，执行修改之前我们又获取了一把用户登录态，并将该用户-id-连同-修改字段-一并发送至后端，这样后端就可以鉴权了" class="headerlink" title="同样的，执行修改之前我们又获取了一把用户登录态，并将该用户 id 连同 修改字段 一并发送至后端，这样后端就可以鉴权了"></a>同样的，执行修改之前我们又获取了一把用户登录态，并将该用户 id 连同 修改字段 一并发送至后端，这样后端就可以鉴权了</h5></li>
</ul>
<h1 id="打通前后端？"><a href="#打通前后端？" class="headerlink" title="打通前后端？"></a>打通前后端？</h1><ul>
<li><h5 id="ok，到目前为止，前后端基本打通了——是吗？"><a href="#ok，到目前为止，前后端基本打通了——是吗？" class="headerlink" title="ok，到目前为止，前后端基本打通了——是吗？"></a><em>ok，到目前为止，前后端基本打通了——是吗？</em></h5></li>
</ul>
<ul>
<li><h5 id="axios-发送请求时，默认不会携带cookie，这就导致了：你登录成功了，你的登录态也在后端写进cookie了，但是之后axios发送请求获取当前登录用户信息，由于没有cookie，是拿不到的"><a href="#axios-发送请求时，默认不会携带cookie，这就导致了：你登录成功了，你的登录态也在后端写进cookie了，但是之后axios发送请求获取当前登录用户信息，由于没有cookie，是拿不到的" class="headerlink" title="axios 发送请求时，默认不会携带cookie，这就导致了：你登录成功了，你的登录态也在后端写进cookie了，但是之后axios发送请求获取当前登录用户信息，由于没有cookie，是拿不到的"></a>axios 发送请求时，默认不会携带cookie，这就导致了：你登录成功了，你的登录态也在后端写进cookie了，但是之后axios发送请求获取当前登录用户信息，由于没有cookie，是拿不到的</h5></li>
<li><h5 id="拿不到当前登录用户信息，剩下的用户信息展示、信息修改就都是扯淡了"><a href="#拿不到当前登录用户信息，剩下的用户信息展示、信息修改就都是扯淡了" class="headerlink" title="拿不到当前登录用户信息，剩下的用户信息展示、信息修改就都是扯淡了"></a>拿不到当前登录用户信息，剩下的用户信息展示、信息修改就都是扯淡了</h5></li>
<li><h5 id="这是为什么呢？因为我们前后端分离，虽然前后端服务器都在本地，但前端端口号：7070-后端端口号：8081"><a href="#这是为什么呢？因为我们前后端分离，虽然前后端服务器都在本地，但前端端口号：7070-后端端口号：8081" class="headerlink" title="这是为什么呢？因为我们前后端分离，虽然前后端服务器都在本地，但前端端口号：7070  后端端口号：8081"></a>这是为什么呢？因为我们前后端分离，虽然前后端服务器都在本地，但前端端口号：7070  后端端口号：8081</h5></li>
<li><h5 id="两个相同域名-但不同端口的服务器-在请求响应，这就是浏览器上的跨域问题：解决跨域问题引起的axios无法正确携带cookie"><a href="#两个相同域名-但不同端口的服务器-在请求响应，这就是浏览器上的跨域问题：解决跨域问题引起的axios无法正确携带cookie" class="headerlink" title="两个相同域名 但不同端口的服务器 在请求响应，这就是浏览器上的跨域问题：解决跨域问题引起的axios无法正确携带cookie"></a>两个相同域名 但不同端口的服务器 在请求响应，这就是浏览器上的跨域问题：解决跨域问题引起的axios无法正确携带cookie</h5></li>
<li><h5 id="如何解决？这里有最简单的解决方法"><a href="#如何解决？这里有最简单的解决方法" class="headerlink" title="如何解决？这里有最简单的解决方法"></a>如何解决？这里有最简单的解决方法</h5></li>
<li><h5 id="前端-MyAxios-ts-加一行代码-——-withCredentials-true"><a href="#前端-MyAxios-ts-加一行代码-——-withCredentials-true" class="headerlink" title="前端   MyAxios.ts 加一行代码 —— withCredentials: true"></a>前端   MyAxios.ts 加一行代码 —— withCredentials: true</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> myAxios = axios.<span class="hljs-title function_">create</span>(&#123;<br>  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">&quot;http://localhost:8081/api&quot;</span>,<br>  <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span>,<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="后端-controller-加一行代码-——-CrossOrigin"><a href="#后端-controller-加一行代码-——-CrossOrigin" class="headerlink" title="后端 controller 加一行代码 —— @CrossOrigin"></a>后端 controller 加一行代码 —— @CrossOrigin</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@CrossOrigin</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">UserController</span> &#123;<br>	......................<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="到这里正常来讲问题就应该解决了，但如果这时你发现你前端所有的请求都报错的话，那说明：前端axios是允许携带cookie了，但后端服务器不接受"><a href="#到这里正常来讲问题就应该解决了，但如果这时你发现你前端所有的请求都报错的话，那说明：前端axios是允许携带cookie了，但后端服务器不接受" class="headerlink" title="到这里正常来讲问题就应该解决了，但如果这时你发现你前端所有的请求都报错的话，那说明：前端axios是允许携带cookie了，但后端服务器不接受"></a>到这里正常来讲问题就应该解决了，但如果这时你发现你前端所有的请求都报错的话，那说明：前端axios是允许携带cookie了，但后端服务器不接受</h5></li>
<li><h5 id="CrossOrigin没有起作用"><a href="#CrossOrigin没有起作用" class="headerlink" title="@CrossOrigin没有起作用"></a>@CrossOrigin没有起作用</h5></li>
<li><h5 id="那就试试第二种解决方案吧："><a href="#那就试试第二种解决方案吧：" class="headerlink" title="那就试试第二种解决方案吧："></a>那就试试第二种解决方案吧：</h5></li>
<li><h5 id="config-WebConfig-下编写拦截器"><a href="#config-WebConfig-下编写拦截器" class="headerlink" title="config/WebConfig 下编写拦截器"></a>config/WebConfig 下编写拦截器</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.memory.usercenter.config;<br><br><span class="hljs-keyword">import</span> com.memory.usercenter.common.JacksonObjectMapper;<br><span class="hljs-keyword">import</span> lombok.extern.slf4j.Slf4j;<br><span class="hljs-keyword">import</span> org.springframework.context.annotation.Configuration;<br><span class="hljs-keyword">import</span> org.springframework.http.converter.HttpMessageConverter;<br><span class="hljs-keyword">import</span> org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;<br><span class="hljs-keyword">import</span> org.springframework.web.servlet.config.annotation.CorsRegistry;<br><span class="hljs-keyword">import</span> org.springframework.web.servlet.config.annotation.InterceptorRegistry;<br><span class="hljs-keyword">import</span> org.springframework.web.servlet.config.annotation.WebMvcConfigurer;<br><span class="hljs-keyword">import</span> java.util.List;<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * Web配置类</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Configuration</span><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">WebConfig</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">WebMvcConfigurer</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 添加Web项目的拦截器</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">addInterceptors</span><span class="hljs-params">(InterceptorRegistry registry)</span> &#123;<br>        <span class="hljs-comment">// 对所有访问路径，都通过MyInterceptor类型的拦截器进行拦截</span><br>        registry.addInterceptor(<span class="hljs-keyword">new</span> <span class="hljs-title class_">MyInterceptor</span>()).addPathPatterns(<span class="hljs-string">&quot;/**&quot;</span>);<br>        <span class="hljs-comment">//放行登录页，登陆操作，静态资源</span><br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 允许跨域请求</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> registry registry</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">addCorsMappings</span><span class="hljs-params">(CorsRegistry registry)</span> &#123;<br>        registry.addMapping(<span class="hljs-string">&quot;/**&quot;</span>)<br>                .allowedOrigins(<span class="hljs-string">&quot;http://localhost:7070&quot;</span>, <span class="hljs-string">&quot;http://localhost:8000&quot;</span>)<br>                .allowCredentials(<span class="hljs-literal">true</span>)<br>                .allowedMethods(<span class="hljs-string">&quot;GET&quot;</span>, <span class="hljs-string">&quot;POST&quot;</span>, <span class="hljs-string">&quot;DELETE&quot;</span>, <span class="hljs-string">&quot;PUT&quot;</span>)<br>                .maxAge(<span class="hljs-number">3600</span>);<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这个拦截器的重点是："><a href="#这个拦截器的重点是：" class="headerlink" title="这个拦截器的重点是："></a>这个拦截器的重点是：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 允许访问的请求地址 - 这里是 伙伴匹配 和 用户中心</span><br>.allowedOrigins(<span class="hljs-string">&quot;http://localhost:7070&quot;</span>, <span class="hljs-string">&quot;http://localhost:8000&quot;</span>)<br><span class="hljs-comment">// 允许携带cookie的请求</span><br>.allowCredentials(<span class="hljs-literal">true</span>)                   <br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="好！这样问题就完美解决了！"><a href="#好！这样问题就完美解决了！" class="headerlink" title="好！这样问题就完美解决了！"></a>好！这样问题就完美解决了！</h5></li>
<li><h5 id="但是我这边还有问题，前端请求仍然报错，最终我怀疑是我的前端域名有问题"><a href="#但是我这边还有问题，前端请求仍然报错，最终我怀疑是我的前端域名有问题" class="headerlink" title="但是我这边还有问题，前端请求仍然报错，最终我怀疑是我的前端域名有问题"></a>但是我这边还有问题，前端请求仍然报错，最终我怀疑是我的前端域名有问题</h5></li>
<li><h5 id="我的域名一直是http-127-0-0-1-7070，于是我这样干了："><a href="#我的域名一直是http-127-0-0-1-7070，于是我这样干了：" class="headerlink" title="我的域名一直是http://127.0.0.1:7070，于是我这样干了："></a>我的域名一直是<a href="http://127.0.0.1:7070，于是我这样干了：">http://127.0.0.1:7070，于是我这样干了：</a></h5></li>
<li><h5 id="vite-config-ts下："><a href="#vite-config-ts下：" class="headerlink" title="vite.config.ts下："></a>vite.config.ts下：</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">import</span> dns <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;dns&quot;</span>;<br>dns.<span class="hljs-title function_">setDefaultResultOrder</span>(<span class="hljs-string">&quot;verbatim&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="成功把域名修改为http-localhost-7070了，于是一切都成功了"><a href="#成功把域名修改为http-localhost-7070了，于是一切都成功了" class="headerlink" title="成功把域名修改为http://localhost:7070了，于是一切都成功了"></a>成功把域名修改为<a href="http://localhost:7070了，于是一切都成功了">http://localhost:7070了，于是一切都成功了</a></h5></li>
<li><h5 id="当然我也试过这么改，没什么用"><a href="#当然我也试过这么改，没什么用" class="headerlink" title="当然我也试过这么改，没什么用"></a>当然我也试过这么改，没什么用</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-attr">server</span>: &#123;<br>	<span class="hljs-attr">host</span>: <span class="hljs-string">&quot;localhost&quot;</span>,<br>    <span class="hljs-attr">port</span>: <span class="hljs-number">7070</span>,<br>  &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="好了，以上就是跨域axios携带cookie的解决办法"><a href="#好了，以上就是跨域axios携带cookie的解决办法" class="headerlink" title="好了，以上就是跨域axios携带cookie的解决办法"></a>好了，以上就是跨域axios携带cookie的解决办法</h5></li>
<li><h5 id="最后还有个小BUG，就是后端接收到前端发送的id时，由于id是long型，在传输过程中可能会有精度丢失，导致前后端的id不一致，这里的解决办法在之前的raggie-take-out里也用过，那便是："><a href="#最后还有个小BUG，就是后端接收到前端发送的id时，由于id是long型，在传输过程中可能会有精度丢失，导致前后端的id不一致，这里的解决办法在之前的raggie-take-out里也用过，那便是：" class="headerlink" title="最后还有个小BUG，就是后端接收到前端发送的id时，由于id是long型，在传输过程中可能会有精度丢失，导致前后端的id不一致，这里的解决办法在之前的raggie_take_out里也用过，那便是："></a>最后还有个小BUG，就是后端接收到前端发送的id时，由于id是long型，在传输过程中可能会有精度丢失，导致前后端的id不一致，这里的解决办法在之前的raggie_take_out里也用过，那便是：</h5></li>
<li><h5 id="提供对象转换器JacksonObjectMapper-common-基于Jackson进行Java到json数据的转换"><a href="#提供对象转换器JacksonObjectMapper-common-基于Jackson进行Java到json数据的转换" class="headerlink" title="提供对象转换器JacksonObjectMapper   common   基于Jackson进行Java到json数据的转换"></a>提供对象转换器JacksonObjectMapper   common   基于Jackson进行Java到json数据的转换</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.memory.usercenter.common;<br><br><span class="hljs-keyword">import</span> com.fasterxml.jackson.databind.DeserializationFeature;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.databind.ObjectMapper;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.databind.<span class="hljs-keyword">module</span>.SimpleModule;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.databind.ser.std.ToStringSerializer;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.datatype.jsr310.deser.LocalDateDeserializer;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.datatype.jsr310.deser.LocalTimeDeserializer;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.datatype.jsr310.ser.LocalDateSerializer;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;<br><span class="hljs-keyword">import</span> com.fasterxml.jackson.datatype.jsr310.ser.LocalTimeSerializer;<br><br><span class="hljs-keyword">import</span> java.math.BigInteger;<br><span class="hljs-keyword">import</span> java.time.LocalDate;<br><span class="hljs-keyword">import</span> java.time.LocalDateTime;<br><span class="hljs-keyword">import</span> java.time.LocalTime;<br><span class="hljs-keyword">import</span> java.time.format.DateTimeFormatter;<br><br><span class="hljs-keyword">import</span> <span class="hljs-keyword">static</span> com.fasterxml.jackson.databind.DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES;<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 对象映射器:基于jackson将Java对象转为json，或者将json转为Java对象</span><br><span class="hljs-comment"> * 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象]</span><br><span class="hljs-comment"> * 从Java对象生成JSON的过程称为 [序列化Java对象到JSON]</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">JacksonObjectMapper</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ObjectMapper</span> &#123;<br><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">String</span> <span class="hljs-variable">DEFAULT_DATE_FORMAT</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;yyyy-MM-dd&quot;</span>;<br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">String</span> <span class="hljs-variable">DEFAULT_DATE_TIME_FORMAT</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;yyyy-MM-dd HH:mm:ss&quot;</span>;<br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">String</span> <span class="hljs-variable">DEFAULT_TIME_FORMAT</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;HH:mm:ss&quot;</span>;<br><br>    <span class="hljs-keyword">public</span> <span class="hljs-title function_">JacksonObjectMapper</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-built_in">super</span>();<br>        <span class="hljs-comment">//收到未知属性时不报异常</span><br>        <span class="hljs-built_in">this</span>.configure(FAIL_ON_UNKNOWN_PROPERTIES, <span class="hljs-literal">false</span>);<br><br>        <span class="hljs-comment">//反序列化时，属性不存在的兼容处理</span><br>        <span class="hljs-built_in">this</span>.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);<br><br><br>        <span class="hljs-type">SimpleModule</span> <span class="hljs-variable">simpleModule</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">SimpleModule</span>()<br>                .addDeserializer(LocalDateTime.class, <span class="hljs-keyword">new</span> <span class="hljs-title class_">LocalDateTimeDeserializer</span>(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))<br>                .addDeserializer(LocalDate.class, <span class="hljs-keyword">new</span> <span class="hljs-title class_">LocalDateDeserializer</span>(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))<br>                .addDeserializer(LocalTime.class, <span class="hljs-keyword">new</span> <span class="hljs-title class_">LocalTimeDeserializer</span>(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))<br><br>                .addSerializer(BigInteger.class, ToStringSerializer.instance)<br>                .addSerializer(Long.class, ToStringSerializer.instance)<br>                .addSerializer(LocalDateTime.class, <span class="hljs-keyword">new</span> <span class="hljs-title class_">LocalDateTimeSerializer</span>(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))<br>                .addSerializer(LocalDate.class, <span class="hljs-keyword">new</span> <span class="hljs-title class_">LocalDateSerializer</span>(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))<br>                .addSerializer(LocalTime.class, <span class="hljs-keyword">new</span> <span class="hljs-title class_">LocalTimeSerializer</span>(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));<br><br>        <span class="hljs-comment">//注册功能模块 例如，可以添加自定义序列化器和反序列化器</span><br>        <span class="hljs-built_in">this</span>.registerModule(simpleModule);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在WebMvcConfig配置类中扩展Spring-mvc的消息处理器"><a href="#在WebMvcConfig配置类中扩展Spring-mvc的消息处理器" class="headerlink" title="在WebMvcConfig配置类中扩展Spring mvc的消息处理器"></a>在WebMvcConfig配置类中扩展Spring mvc的消息处理器</h5></li>
<li><h5 id="在此消息转换器中使用提供的对象转换器进行Java对象到json数据的转换"><a href="#在此消息转换器中使用提供的对象转换器进行Java对象到json数据的转换" class="headerlink" title="在此消息转换器中使用提供的对象转换器进行Java对象到json数据的转换"></a>在此消息转换器中使用提供的对象转换器进行Java对象到json数据的转换</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 扩展消息转换器</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> converters converters</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">extendMessageConverters</span><span class="hljs-params">(List&lt;HttpMessageConverter&lt;?&gt;&gt; converters)</span> &#123;<br>        log.info(<span class="hljs-string">&quot;扩展消息转换器...&quot;</span>);<br>        <span class="hljs-comment">//创建消息转换器</span><br>        <span class="hljs-type">MappingJackson2HttpMessageConverter</span> <span class="hljs-variable">messageConverter</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MappingJackson2HttpMessageConverter</span>();<br>        <span class="hljs-comment">//设置具体的对象映射器</span><br>        messageConverter.setObjectMapper(<span class="hljs-keyword">new</span> <span class="hljs-title class_">JacksonObjectMapper</span>());<br>        <span class="hljs-comment">//通过索引设置,让自己的转换器放在最前面,否则默认的jackson转换器会在最前面,用不上我们设置的转换器</span><br>        converters.add(<span class="hljs-number">0</span>, messageConverter);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这样就解决了long型数据精度丢失的问题了"><a href="#这样就解决了long型数据精度丢失的问题了" class="headerlink" title="这样就解决了long型数据精度丢失的问题了"></a>这样就解决了long型数据精度丢失的问题了</h5></li>
</ul>
<h1 id="导入用户数据"><a href="#导入用户数据" class="headerlink" title="导入用户数据"></a>导入用户数据</h1><ul>
<li><h5 id="第一种：Export-data-to-file导出数据（CSV格式），再Export-data-from-file导入数据-适用于快速导入少量的数据"><a href="#第一种：Export-data-to-file导出数据（CSV格式），再Export-data-from-file导入数据-适用于快速导入少量的数据" class="headerlink" title="第一种：Export data to file导出数据（CSV格式），再Export data from file导入数据    适用于快速导入少量的数据"></a>第一种：Export data to file导出数据（CSV格式），再Export data from file导入数据    适用于快速导入少量的数据</h5></li>
<li><h5 id="第二种就是用编程的方式批量插入数据了"><a href="#第二种就是用编程的方式批量插入数据了" class="headerlink" title="第二种就是用编程的方式批量插入数据了"></a>第二种就是用编程的方式批量插入数据了</h5></li>
<li><h5 id="先简单地写下代码实现方法吧："><a href="#先简单地写下代码实现方法吧：" class="headerlink" title="先简单地写下代码实现方法吧："></a>先简单地写下代码实现方法吧：</h5></li>
<li><h5 id="在once-InsertUser下编写："><a href="#在once-InsertUser下编写：" class="headerlink" title="在once/InsertUser下编写："></a>在once/InsertUser下编写：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Component</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">InsertUser</span> &#123;<br>   ....................<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> UserService userService;<br><br>    <span class="hljs-comment">// 项目启动后, 每隔5秒就执行一次该方法</span><br>    <span class="hljs-meta">@Scheduled(fixedDelay = 5000)</span><br><span class="hljs-comment">//  @Scheduled(initialDelay = 5000, fixedDelay = Long.MAX_VALUE)</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">doInsertUsers</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-type">StopWatch</span> <span class="hljs-variable">stopWatch</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">StopWatch</span>();<br>        System.out.println(<span class="hljs-string">&quot;go go go go&quot;</span>);<br>        <span class="hljs-comment">// 计时开始</span><br>        stopWatch.start();<br>        <span class="hljs-comment">// 插入数据条数</span><br>        <span class="hljs-keyword">final</span> <span class="hljs-type">int</span> <span class="hljs-variable">INSERT_NUM</span> <span class="hljs-operator">=</span> <span class="hljs-number">1000</span>;<br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; i &lt; INSERT_NUM; i++) &#123;<br>            <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>();<br>            user.setUserAccount(<span class="hljs-string">&quot;memory&quot;</span>);<br>            user.setUsername(<span class="hljs-string">&quot;邓哈哈&quot;</span>);<br>            user.setUserPassword(<span class="hljs-string">&quot;12345678&quot;</span>);<br>            user.setAvatarUrl(<span class="hljs-string">&quot;&quot;</span>);<br>            user.setGender(<span class="hljs-string">&quot;&quot;</span>);<br>            user.setPhone(<span class="hljs-string">&quot;18889889898&quot;</span>);<br>            user.setEmail(<span class="hljs-string">&quot;3348407547@qq.com&quot;</span>);<br>            user.setUserStatus(<span class="hljs-number">0</span>);<br>            user.setUserRole(<span class="hljs-number">1</span>);<br>            user.setPlanetCode(<span class="hljs-string">&quot;17625&quot;</span>);<br>            user.setTags(<span class="hljs-string">&quot;&quot;</span>);<br>            <span class="hljs-comment">// 插入数据</span><br>            userService.save(user);<br>        &#125;<br>        <span class="hljs-comment">// 计时结束</span><br>        stopWatch.stop();<br>        <span class="hljs-comment">// 计算整个插入过程耗费的时间</span><br>        System.out.println(stopWatch.getTotalTimeMillis());<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="最后在项目启动类上写下："><a href="#最后在项目启动类上写下：" class="headerlink" title="最后在项目启动类上写下："></a>最后在项目启动类上写下：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@EnableScheduling</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="启动项目！每隔5秒就会插入1000条用户数据"><a href="#启动项目！每隔5秒就会插入1000条用户数据" class="headerlink" title="启动项目！每隔5秒就会插入1000条用户数据~"></a>启动项目！每隔5秒就会插入1000条用户数据~</h5></li>
<li><h5 id="然后我们写个测试类，在测试类中测试批量插入数据"><a href="#然后我们写个测试类，在测试类中测试批量插入数据" class="headerlink" title="然后我们写个测试类，在测试类中测试批量插入数据"></a>然后我们写个测试类，在测试类中测试批量插入数据</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@SpringBootTest</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">InsertUserTest</span> &#123;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> UserService userService;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 插入数据</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Test</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">doInsertUsers1</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-type">StopWatch</span> <span class="hljs-variable">stopWatch</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">StopWatch</span>();<br>        System.out.println(<span class="hljs-string">&quot;go go go go&quot;</span>);<br>        stopWatch.start();<br><br>        <span class="hljs-keyword">final</span> <span class="hljs-type">int</span> <span class="hljs-variable">INSERT_NUM</span> <span class="hljs-operator">=</span> <span class="hljs-number">1000</span>;<br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; i &lt; INSERT_NUM; i++) &#123;<br>            <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>();<br>            user.setUserAccount(<span class="hljs-string">&quot;memory&quot;</span>);<br>            user.setUsername(<span class="hljs-string">&quot;邓哈哈&quot;</span>);<br>            user.setUserPassword(<span class="hljs-string">&quot;12345678&quot;</span>);<br>            user.setAvatarUrl(<span class="hljs-string">&quot;&quot;</span>);<br>            user.setGender(<span class="hljs-string">&quot;&quot;</span>);<br>            user.setPhone(<span class="hljs-string">&quot;18889889898&quot;</span>);<br>            user.setEmail(<span class="hljs-string">&quot;3348407547@qq.com&quot;</span>);<br>            user.setUserStatus(<span class="hljs-number">0</span>);<br>            user.setUserRole(<span class="hljs-number">1</span>);<br>            user.setPlanetCode(<span class="hljs-string">&quot;17625&quot;</span>);<br>            user.setTags(<span class="hljs-string">&quot;&quot;</span>);<br><br>            userService.save(user);<br>        &#125;<br><br>        stopWatch.stop();<br>        System.out.println(stopWatch.getTotalTimeMillis());<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="我们采取批量插入的方式，一次性插入多条记录，减少建立和释放数据库连接的次数，提高插入效率"><a href="#我们采取批量插入的方式，一次性插入多条记录，减少建立和释放数据库连接的次数，提高插入效率" class="headerlink" title="我们采取批量插入的方式，一次性插入多条记录，减少建立和释放数据库连接的次数，提高插入效率"></a>我们采取批量插入的方式，一次性插入多条记录，减少建立和释放数据库连接的次数，提高插入效率</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 批量插入数据</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Test</span><br>   <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">doInsertUsers2</span><span class="hljs-params">()</span> &#123;<br>       <span class="hljs-type">StopWatch</span> <span class="hljs-variable">stopWatch</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">StopWatch</span>();<br>       System.out.println(<span class="hljs-string">&quot;go go go go&quot;</span>);<br>       stopWatch.start();<br><br>       ArrayList&lt;User&gt; userList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br><br>       <span class="hljs-keyword">final</span> <span class="hljs-type">int</span> <span class="hljs-variable">INSERT_NUM</span> <span class="hljs-operator">=</span> <span class="hljs-number">1000</span>;<br>       <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; i &lt; INSERT_NUM; i++) &#123;<br>           <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>();<br>           user.setUserAccount(<span class="hljs-string">&quot;memory&quot;</span>);<br>           user.setUsername(<span class="hljs-string">&quot;邓哈哈&quot;</span>);<br>           user.setUserPassword(<span class="hljs-string">&quot;12345678&quot;</span>);<br>           user.setAvatarUrl(<span class="hljs-string">&quot;&quot;</span>);<br>           user.setGender(<span class="hljs-string">&quot;&quot;</span>);<br>           user.setPhone(<span class="hljs-string">&quot;18889889898&quot;</span>);<br>           user.setEmail(<span class="hljs-string">&quot;3348407547@qq.com&quot;</span>);<br>           user.setUserStatus(<span class="hljs-number">0</span>);<br>           user.setUserRole(<span class="hljs-number">1</span>);<br>           user.setPlanetCode(<span class="hljs-string">&quot;17625&quot;</span>);<br>           user.setTags(<span class="hljs-string">&quot;&quot;</span>);<br>           userList.add(user);<br>       &#125;<br>       userService.saveBatch(userList, <span class="hljs-number">100</span>);<br><br>       stopWatch.stop();<br>       System.out.println(stopWatch.getTotalTimeMillis());<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="我们也可以采用并发的方式批量插入数据，效率更高"><a href="#我们也可以采用并发的方式批量插入数据，效率更高" class="headerlink" title="我们也可以采用并发的方式批量插入数据，效率更高"></a>我们也可以采用并发的方式批量插入数据，效率更高</h5></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">  * 并发批量插入数据</span><br><span class="hljs-comment">  */</span><br> @<span class="hljs-title class_">Test</span><br> public <span class="hljs-keyword">void</span> <span class="hljs-title function_">doConcurrencyInsertUsers</span>(<span class="hljs-params"></span>) &#123;<br>     <span class="hljs-comment">// new一个StopWatch对象</span><br>     <span class="hljs-title class_">StopWatch</span> stopWatch = <span class="hljs-keyword">new</span> <span class="hljs-title class_">StopWatch</span>();<br>     <span class="hljs-comment">// 计时开始</span><br>     stopWatch.<span class="hljs-title function_">start</span>();<br>     <span class="hljs-comment">// 每条线程插入1000条</span><br>     int batchSize = <span class="hljs-number">1000</span>;<br>     int j = <span class="hljs-number">0</span>;<br>     <span class="hljs-comment">// 创建一个异步任务集合</span><br>     <span class="hljs-title class_">ArrayList</span>&lt;<span class="hljs-title class_">CompletableFuture</span>&lt;<span class="hljs-title class_">Void</span>&gt;&gt; futureList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>     <span class="hljs-comment">// 开10条线程</span><br>     <span class="hljs-keyword">for</span> (int i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">10</span>; i++) &#123;<br>         <span class="hljs-comment">// 每条线程下new一个userList</span><br>         <span class="hljs-title class_">ArrayList</span>&lt;<span class="hljs-title class_">User</span>&gt; userList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>         <span class="hljs-keyword">while</span> (<span class="hljs-literal">true</span>) &#123;<br>             j++;<br>             <span class="hljs-title class_">User</span> user = <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>();<br>             user.<span class="hljs-title function_">setUserAccount</span>(<span class="hljs-string">&quot;memory&quot;</span>);<br>             user.<span class="hljs-title function_">setUsername</span>(<span class="hljs-string">&quot;邓哈哈&quot;</span>);<br>             user.<span class="hljs-title function_">setUserPassword</span>(<span class="hljs-string">&quot;12345678&quot;</span>);<br>             user.<span class="hljs-title function_">setAvatarUrl</span>(<span class="hljs-string">&quot;&quot;</span>);<br>             user.<span class="hljs-title function_">setGender</span>(<span class="hljs-string">&quot;&quot;</span>);<br>             user.<span class="hljs-title function_">setPhone</span>(<span class="hljs-string">&quot;18889889898&quot;</span>);<br>             user.<span class="hljs-title function_">setEmail</span>(<span class="hljs-string">&quot;3348407547@qq.com&quot;</span>);<br>             user.<span class="hljs-title function_">setUserStatus</span>(<span class="hljs-number">0</span>);<br>             user.<span class="hljs-title function_">setUserRole</span>(<span class="hljs-number">1</span>);<br>             user.<span class="hljs-title function_">setPlanetCode</span>(<span class="hljs-string">&quot;17625&quot;</span>);<br>             user.<span class="hljs-title function_">setTags</span>(<span class="hljs-string">&quot;&quot;</span>);<br><br>             userList.<span class="hljs-title function_">add</span>(user);<br>             <span class="hljs-comment">// 当该线程插满1000条数据，便退出该线程循环</span><br>             <span class="hljs-keyword">if</span> (j % batchSize == <span class="hljs-number">0</span>) &#123;<br>                 <span class="hljs-keyword">break</span>;<br>             &#125;<br>         &#125;<br>         <span class="hljs-comment">// 异步条件下, 执行批量插入</span><br>         <span class="hljs-title class_">CompletableFuture</span>&lt;<span class="hljs-title class_">Void</span>&gt; future = <span class="hljs-title class_">CompletableFuture</span>.<span class="hljs-title function_">runAsync</span>(() -&gt; &#123;<br>             <span class="hljs-title class_">System</span>.<span class="hljs-property">out</span>.<span class="hljs-title function_">println</span>(<span class="hljs-string">&quot;threadName: &quot;</span> + <span class="hljs-title class_">Thread</span>.<span class="hljs-title function_">currentThread</span>().<span class="hljs-title function_">getName</span>());<br>             userService.<span class="hljs-title function_">saveBatch</span>(userList, batchSize);<br>         &#125;);<br>         <span class="hljs-comment">// 将该任务存储到异步任务集合当中</span><br>         futureList.<span class="hljs-title function_">add</span>(future);<br>     &#125;<br>     <span class="hljs-comment">// 结束所有异步任务</span><br>     <span class="hljs-title class_">CompletableFuture</span>.<span class="hljs-title function_">allOf</span>(futureList.<span class="hljs-title function_">toArray</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">CompletableFuture</span>[]&#123;&#125;)).<span class="hljs-title function_">join</span>();<br>     <span class="hljs-comment">// 计时结束</span><br>     stopWatch.<span class="hljs-title function_">stop</span>();<br>     <span class="hljs-comment">// 计算插入所用总时间</span><br>     <span class="hljs-title class_">System</span>.<span class="hljs-property">out</span>.<span class="hljs-title function_">println</span>(stopWatch.<span class="hljs-title function_">getTotalTimeMillis</span>());<br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="到此为止，批量导入用户数据我们就实现了"><a href="#到此为止，批量导入用户数据我们就实现了" class="headerlink" title="到此为止，批量导入用户数据我们就实现了"></a>到此为止，批量导入用户数据我们就实现了</h5></li>
<li><h5 id="接下来我们优化了批量插入的数据：1-账户非空且唯一-2-密码-加密-3-标签字符串-4-星球编号非空且唯一"><a href="#接下来我们优化了批量插入的数据：1-账户非空且唯一-2-密码-加密-3-标签字符串-4-星球编号非空且唯一" class="headerlink" title="接下来我们优化了批量插入的数据：1.账户非空且唯一  2.密码 加密  3.标签字符串  4.星球编号非空且唯一"></a>接下来我们优化了批量插入的数据：1.账户非空且唯一  2.密码 加密  3.标签字符串  4.星球编号非空且唯一</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs java">    <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>();<br>    user.setUserAccount(<span class="hljs-string">&quot;memory&quot;</span> + <span class="hljs-string">&quot;_&quot;</span> + (UUID.randomUUID() + <span class="hljs-string">&quot;&quot;</span>).substring(<span class="hljs-number">0</span>, <span class="hljs-number">8</span>));<br>    user.setUsername(<span class="hljs-string">&quot;邓哈哈&quot;</span>);<br><span class="hljs-comment">//  user.setUsername(&quot;邓哇哇&quot;);</span><br>    <span class="hljs-type">String</span> <span class="hljs-variable">password</span> <span class="hljs-operator">=</span> DigestUtils.md5DigestAsHex((SALT + <span class="hljs-number">12345678</span>).getBytes());<br>    user.setUserPassword(password);<br>    user.setAvatarUrl(<span class="hljs-string">&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;</span>);<br>    user.setGender(<span class="hljs-string">&quot;1&quot;</span>);<br><span class="hljs-comment">//  user.setGender(&quot;0&quot;);</span><br>    user.setPhone(<span class="hljs-string">&quot;18535854763&quot;</span>);<br>    user.setEmail(<span class="hljs-string">&quot;3348407547@qq.com&quot;</span>);<br>    user.setUserStatus(<span class="hljs-number">0</span>);<br>    user.setUserRole(<span class="hljs-number">0</span>);<br>    user.setPlanetCode(<span class="hljs-string">&quot;17625&quot;</span>);<br>    user.setTags(<span class="hljs-string">&quot;[\&quot;男\&quot;,\&quot;Java\&quot;,\&quot;Python\&quot;,\&quot;在校本科\&quot;,\&quot;开朗\&quot;,\&quot;努力中\&quot;]&quot;</span>);<br><span class="hljs-comment">//  user.setTags(&quot;[\&quot;女\&quot;,\&quot;Vue\&quot;,\&quot;Python\&quot;,\&quot;在校本科\&quot;,\&quot;发呆\&quot;,\&quot;emo中\&quot;]&quot;);</span><br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="接下来我们要开发主页了"><a href="#接下来我们要开发主页了" class="headerlink" title="接下来我们要开发主页了"></a>接下来我们要开发主页了</h5></li>
<li><h5 id="现阶段思路很简单，主页能够展示所有用户信息就行"><a href="#现阶段思路很简单，主页能够展示所有用户信息就行" class="headerlink" title="现阶段思路很简单，主页能够展示所有用户信息就行"></a>现阶段思路很简单，主页能够展示所有用户信息就行</h5></li>
</ul>
<h1 id="后端接口开发-2"><a href="#后端接口开发-2" class="headerlink" title="后端接口开发"></a>后端接口开发</h1><h2 id="查询全部用户"><a href="#查询全部用户" class="headerlink" title="查询全部用户"></a>查询全部用户</h2><ul>
<li><h5 id="service-层"><a href="#service-层" class="headerlink" title="service 层"></a>service 层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 展示所有用户信息</span><br><span class="hljs-comment">    * 分页查询</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> currentPage 当前页</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> pageSize    每页显示数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 用户列表</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> Page&lt;User&gt; <span class="hljs-title function_">selectPage</span><span class="hljs-params">(<span class="hljs-type">long</span> currentPage, <span class="hljs-type">long</span> pageSize)</span> &#123;<br>       LambdaQueryWrapper&lt;User&gt; lqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">LambdaQueryWrapper</span>&lt;&gt;();<br>       Page&lt;User&gt; userPage = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Page</span>&lt;&gt;(currentPage, pageSize);<br><br>       <span class="hljs-keyword">return</span> userMapper.selectPage(userPage, lqw);<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="controller-层"><a href="#controller-层" class="headerlink" title="controller 层"></a>controller 层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 根据标签查询用户</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 用户列表</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@GetMapping(&quot;/recommend&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;Page&lt;User&gt;&gt; <span class="hljs-title function_">recommend</span><span class="hljs-params">(<span class="hljs-meta">@RequestParam</span> <span class="hljs-type">long</span> currentPage, <span class="hljs-type">long</span> pageSize)</span> &#123;<br>        Page&lt;User&gt; userList = userService.selectPage(currentPage, pageSize);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(userList);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="config-WebConfig-MP分页插件"><a href="#config-WebConfig-MP分页插件" class="headerlink" title="config    WebConfig    MP分页插件"></a>config    WebConfig    MP分页插件</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 分页插件（官网最新）</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@Bean</span><br>  <span class="hljs-keyword">public</span> MybatisPlusInterceptor <span class="hljs-title function_">mybatisPlusInterceptor</span><span class="hljs-params">()</span> &#123;<br>      <span class="hljs-type">MybatisPlusInterceptor</span> <span class="hljs-variable">interceptor</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MybatisPlusInterceptor</span>();<br>      interceptor.addInnerInterceptor(<span class="hljs-keyword">new</span> <span class="hljs-title class_">PaginationInnerInterceptor</span>(DbType.MYSQL));<br>      <span class="hljs-keyword">return</span> interceptor;<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="接下来就是开发主页了"><a href="#接下来就是开发主页了" class="headerlink" title="接下来就是开发主页了"></a>接下来就是开发主页了</h5></li>
</ul>
<h1 id="前端页面开发-1"><a href="#前端页面开发-1" class="headerlink" title="前端页面开发"></a>前端页面开发</h1><h2 id="主页页面开发"><a href="#主页页面开发" class="headerlink" title="主页页面开发"></a>主页页面开发</h2><ul>
<li><h5 id="使用组件快速开发页面-（跟UserListPage页大同小异）"><a href="#使用组件快速开发页面-（跟UserListPage页大同小异）" class="headerlink" title="使用组件快速开发页面 （跟UserListPage页大同小异）"></a>使用组件快速开发页面 （跟UserListPage页大同小异）</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;div id=&quot;content&quot; style=&quot;padding-bottom: 30px&quot;&gt;<br>    &lt;!-- 用户信息展示 --&gt;<br>    &lt;van-card<br>      v-for=&quot;user in userList&quot;<br>      :tag=&quot;`$&#123;user.gender&#125;`&quot;<br>      :title=&quot;`$&#123;user.userAccount&#125; $&#123;user.username&#125; $&#123;user.planetCode&#125;`&quot;<br>      :desc=&quot;user.profile&quot;<br>      :thumb=&quot;`$&#123;user.avatarUrl&#125;`&quot;<br>    &gt;<br>    &lt;!-- 标签展示 --&gt;<br>      &lt;template #tags&gt;<br>        &lt;van-tag<br>          plain<br>          type=&quot;primary&quot;<br>          v-for=&quot;tag in user.tags&quot;<br>          style=&quot;margin-right: 3px; margin-top: 3px&quot;<br>        &gt;<br>          &#123;&#123; tag &#125;&#125;<br>        &lt;/van-tag&gt;<br>      &lt;/template&gt;<br>      <br>      &lt;template #footer&gt;<br>        &lt;van-button size=&quot;mini&quot;&gt;联系俺&lt;/van-button&gt;<br>      &lt;/template&gt;<br>    &lt;/van-card&gt;<br>    &lt;!-- 无用户信息展示 --&gt;<br>    &lt;van-empty v-if=&quot;!userList&quot; description=&quot;获取用户信息失败&quot; /&gt;<br>    &lt;!-- 分页插件 --&gt;<br>    &lt;van-pagination<br>      v-model=&quot;currentPage&quot; <br>      :total-items=&quot;total&quot;<br>      :items-per-page=&quot;pageSize&quot;<br>      force-ellipses<br>      @change=&quot;change&quot;<br>    /&gt;<br>  &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="页面发送请求到后端接口"><a href="#页面发送请求到后端接口" class="headerlink" title="页面发送请求到后端接口"></a>页面发送请求到后端接口</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; onMounted &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; userType &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../models/user&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../plugins/myAxios&quot;</span>;<br><br><span class="hljs-keyword">const</span> userList = <span class="hljs-title function_">ref</span>([]);<br><br><span class="hljs-comment">// 当前页码</span><br><span class="hljs-keyword">const</span> currentPage = <span class="hljs-title function_">ref</span>(<span class="hljs-number">1</span>);<br><span class="hljs-comment">// 每页显示数</span><br><span class="hljs-keyword">let</span> pageSize = <span class="hljs-number">10</span>;<br><span class="hljs-comment">// 总记录数</span><br><span class="hljs-keyword">let</span> <span class="hljs-attr">total</span>: <span class="hljs-built_in">number</span> = <span class="hljs-number">0</span>;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">getPage</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">currentPage: <span class="hljs-built_in">number</span></span>) =&gt; &#123;<br>  <span class="hljs-comment">// 发送请求, 获取用户数据列表</span><br>  <span class="hljs-keyword">const</span> userListData = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/recommend&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">currentPage</span>: currentPage,<br>        <span class="hljs-attr">pageSize</span>: pageSize,<br>      &#125;,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);<br>      total = response.<span class="hljs-property">data</span>?.<span class="hljs-property">total</span>;<br>      pageSize = response.<span class="hljs-property">data</span>?.<span class="hljs-property">size</span>;<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>?.<span class="hljs-property">records</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br>  <span class="hljs-comment">// 成功拿到用户数据列表(不为空)</span><br>  <span class="hljs-keyword">if</span> (userListData) &#123;<br>    <span class="hljs-comment">// 遍历用户数据列表</span><br>    userListData.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">user: userType</span>) =&gt;</span> &#123;<br>      <span class="hljs-comment">// 将gender的 &quot;1&quot;/&quot;0&quot; 渲染成 &quot;男&quot;/&quot;女&quot;</span><br>      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;1&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;男&quot;</span>;<br>      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;0&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;女&quot;</span>;<br>      <span class="hljs-comment">// JSON字符串序列化为列表</span><br>      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">tags</span>) user.<span class="hljs-property">tags</span> = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(user.<span class="hljs-property">tags</span>);<br>    &#125;);<br>    <span class="hljs-comment">// 处理过后的用户列表</span><br>    userList.<span class="hljs-property">value</span> = userListData;<br>  &#125;<br>&#125;;<br><br><span class="hljs-comment">// 用户列表, 钩子函数</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>  <span class="hljs-title function_">getPage</span>(currentPage.<span class="hljs-property">value</span>);<br>&#125;);<br><br><span class="hljs-comment">// 改变页码</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">change</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-title function_">getPage</span>(currentPage.<span class="hljs-property">value</span>);<br>&#125;;<br>&lt;/script&gt;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这块儿逻辑注释已经写得很清楚了，不过还是简单介绍一下吧："><a href="#这块儿逻辑注释已经写得很清楚了，不过还是简单介绍一下吧：" class="headerlink" title="这块儿逻辑注释已经写得很清楚了，不过还是简单介绍一下吧："></a>这块儿逻辑注释已经写得很清楚了，不过还是简单介绍一下吧：</h5></li>
<li><h5 id="axios请求，携带currentPage和pageSize发送至后端，响应到对应用户列表"><a href="#axios请求，携带currentPage和pageSize发送至后端，响应到对应用户列表" class="headerlink" title="axios请求，携带currentPage和pageSize发送至后端，响应到对应用户列表"></a>axios请求，携带currentPage和pageSize发送至后端，响应到对应用户列表</h5></li>
<li><h5 id="之前MyAxios封装过返回值：response-data"><a href="#之前MyAxios封装过返回值：response-data" class="headerlink" title="之前MyAxios封装过返回值：response.data"></a>之前MyAxios封装过返回值：response.data</h5></li>
<li><h5 id="需注意到，我们使用了vant的分页组件"><a href="#需注意到，我们使用了vant的分页组件" class="headerlink" title="需注意到，我们使用了vant的分页组件"></a>需注意到，我们使用了vant的分页组件</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 分页插件 --&gt;<br>   &lt;van-pagination<br>     v-model=&quot;currentPage&quot; -- 当前页码<br>     :total-items=&quot;total&quot; -- 记录总数<br>     :items-per-page=&quot;pageSize&quot; -- 每页记录数<br>     force-ellipses<br>     @change=&quot;change&quot; -- 改变页码<br>   /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="有了这个组件，通过change方法，可以很方便地改变当前页码currentPage，同时执行查询，可以查到每页数据"><a href="#有了这个组件，通过change方法，可以很方便地改变当前页码currentPage，同时执行查询，可以查到每页数据" class="headerlink" title="有了这个组件，通过change方法，可以很方便地改变当前页码currentPage，同时执行查询，可以查到每页数据"></a>有了这个组件，通过change方法，可以很方便地改变当前页码currentPage，同时执行查询，可以查到每页数据</h5></li>
<li><h5 id="组件其他属性也都标明了，可以控制总记录数、每页记录数"><a href="#组件其他属性也都标明了，可以控制总记录数、每页记录数" class="headerlink" title="组件其他属性也都标明了，可以控制总记录数、每页记录数"></a>组件其他属性也都标明了，可以控制总记录数、每页记录数</h5></li>
<li><h5 id="这里我们使用response-data-records、response-data-size、response-data-total可分别获取：每页数据记录、每页数据容量、总记录数"><a href="#这里我们使用response-data-records、response-data-size、response-data-total可分别获取：每页数据记录、每页数据容量、总记录数" class="headerlink" title="这里我们使用response.data?.records、response.data?.size、response.data?.total可分别获取：每页数据记录、每页数据容量、总记录数"></a>这里我们使用response.data?.records、response.data?.size、response.data?.total可分别获取：每页数据记录、每页数据容量、总记录数</h5></li>
<li><h5 id="当然，组件上的总记录数total就可以拿到了，pageSize这边是固定死的，每页10条，暂不支持灵活改变每页显示数"><a href="#当然，组件上的总记录数total就可以拿到了，pageSize这边是固定死的，每页10条，暂不支持灵活改变每页显示数" class="headerlink" title="当然，组件上的总记录数total就可以拿到了，pageSize这边是固定死的，每页10条，暂不支持灵活改变每页显示数"></a>当然，组件上的总记录数total就可以拿到了，pageSize这边是固定死的，每页10条，暂不支持灵活改变每页显示数</h5></li>
<li><h5 id="以上是对这段逻辑实现的粗略介绍，如有疑问还请研读代码，实现过程是十分清晰的"><a href="#以上是对这段逻辑实现的粗略介绍，如有疑问还请研读代码，实现过程是十分清晰的" class="headerlink" title="以上是对这段逻辑实现的粗略介绍，如有疑问还请研读代码，实现过程是十分清晰的"></a>以上是对这段逻辑实现的粗略介绍，如有疑问还请研读代码，实现过程是十分清晰的</h5></li>
</ul>
<h1 id="Redis缓存"><a href="#Redis缓存" class="headerlink" title="Redis缓存"></a>Redis缓存</h1><ul>
<li><h5 id="之前我们给数据库批量插入了大量数据，并且在主页根据展示出所有用户信息"><a href="#之前我们给数据库批量插入了大量数据，并且在主页根据展示出所有用户信息" class="headerlink" title="之前我们给数据库批量插入了大量数据，并且在主页根据展示出所有用户信息"></a>之前我们给数据库批量插入了大量数据，并且在主页根据展示出所有用户信息</h5></li>
<li><h5 id="为了提高查询效率，我们还采用了分页查询的方式"><a href="#为了提高查询效率，我们还采用了分页查询的方式" class="headerlink" title="为了提高查询效率，我们还采用了分页查询的方式"></a>为了提高查询效率，我们还采用了分页查询的方式</h5></li>
<li><h5 id="但这种解决办法并不彻底，频繁查询数据库还是很低效，所以我们使用Redis技术来解决查询效率低下的问题"><a href="#但这种解决办法并不彻底，频繁查询数据库还是很低效，所以我们使用Redis技术来解决查询效率低下的问题" class="headerlink" title="但这种解决办法并不彻底，频繁查询数据库还是很低效，所以我们使用Redis技术来解决查询效率低下的问题"></a>但这种解决办法并不彻底，频繁查询数据库还是很低效，所以我们使用Redis技术来解决查询效率低下的问题</h5></li>
</ul>
<h2 id="Redis的引入和测试"><a href="#Redis的引入和测试" class="headerlink" title="Redis的引入和测试"></a>Redis的引入和测试</h2><ul>
<li><h5 id="之前在解决Session共享的时候已经做过了："><a href="#之前在解决Session共享的时候已经做过了：" class="headerlink" title="之前在解决Session共享的时候已经做过了："></a>之前在解决Session共享的时候已经做过了：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs java">&lt;!-- https:<span class="hljs-comment">//mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-redis --&gt;</span><br>     &lt;dependency&gt;<br>         &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;<br>         &lt;artifactId&gt;spring-boot-starter-data-redis&lt;/artifactId&gt;<br>         &lt;version&gt;<span class="hljs-number">2.6</span><span class="hljs-number">.4</span>&lt;/version&gt;<br>     &lt;/dependency&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">spring:</span><br>  <span class="hljs-comment"># session 失效时间(分钟)</span><br>  <span class="hljs-attr">session:</span><br>    <span class="hljs-attr">timeout:</span> <span class="hljs-number">86640</span><br>    <span class="hljs-attr">store-type:</span> <span class="hljs-string">redis</span><br>  <span class="hljs-comment"># redis 配置</span><br>  <span class="hljs-attr">redis:</span><br>    <span class="hljs-attr">port:</span> <span class="hljs-number">6379</span><br>    <span class="hljs-attr">host:</span> <span class="hljs-string">localhost</span><br>    <span class="hljs-attr">database:</span> <span class="hljs-number">0</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="引入了Redis，二话不说先测增删改查，接下来小小地测试一把（test-redis-RedisTest）："><a href="#引入了Redis，二话不说先测增删改查，接下来小小地测试一把（test-redis-RedisTest）：" class="headerlink" title="引入了Redis，二话不说先测增删改查，接下来小小地测试一把（test/redis/RedisTest）："></a>引入了Redis，二话不说先测增删改查，接下来小小地测试一把（test/redis/RedisTest）：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@SpringBootTest</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">RedisTest</span> &#123;<br>   <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> RedisTemplate redisTemplate;<br><br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> <span class="hljs-type">StringRedisTemplate</span> <span class="hljs-variable">stringRedisTemplate</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">StringRedisTemplate</span>();<br><br>    <span class="hljs-meta">@Test</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">test1</span><span class="hljs-params">()</span> &#123;<br>        stringRedisTemplate.opsForValue().set(<span class="hljs-string">&quot;memory&quot;</span>, <span class="hljs-string">&quot;邓哈哈&quot;</span>);<br><span class="hljs-comment">//        stringRedisTemplate.opsForValue().set(&quot;memory&quot;, 18);</span><br>        redisTemplate.opsForValue().set(<span class="hljs-string">&quot;memory2&quot;</span>, <span class="hljs-number">9</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">memory</span> <span class="hljs-operator">=</span> stringRedisTemplate.opsForValue().get(<span class="hljs-string">&quot;memory&quot;</span>);<br>    &#125;<br><br>    <span class="hljs-meta">@Test</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">test2</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-comment">// 增</span><br>        redisTemplate.opsForValue().set(<span class="hljs-string">&quot;memoryString&quot;</span>, <span class="hljs-string">&quot;dog&quot;</span>);<br>        redisTemplate.opsForValue().set(<span class="hljs-string">&quot;memoryInt&quot;</span>, <span class="hljs-number">1</span>);<br>        redisTemplate.opsForValue().set(<span class="hljs-string">&quot;memoryDouble&quot;</span>, <span class="hljs-number">3.0</span>);<br>        <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>();<br>        user.setId(<span class="hljs-number">9999L</span>);<br>        user.setUserAccount(<span class="hljs-string">&quot;memoryc7b93cb1b3&quot;</span>);<br>        redisTemplate.opsForValue().set(<span class="hljs-string">&quot;memoryUser&quot;</span>, user);<br>        <span class="hljs-comment">// 查</span><br>        <span class="hljs-type">Object</span> <span class="hljs-variable">dog</span> <span class="hljs-operator">=</span> redisTemplate.opsForValue().get(<span class="hljs-string">&quot;memoryString&quot;</span>);<br>        Assertions.assertTrue(<span class="hljs-string">&quot;dog&quot;</span>.equals(dog));<br>        <span class="hljs-type">Object</span> <span class="hljs-variable">anInt</span> <span class="hljs-operator">=</span> redisTemplate.opsForValue().get(<span class="hljs-string">&quot;memoryInt&quot;</span>);<br>        Assertions.assertTrue(<span class="hljs-number">1</span> == (Integer) anInt);<br>        <span class="hljs-type">Object</span> <span class="hljs-variable">anDouble</span> <span class="hljs-operator">=</span> redisTemplate.opsForValue().get(<span class="hljs-string">&quot;memoryDouble&quot;</span>);<br>        Assertions.assertTrue(<span class="hljs-number">3.0</span> == (Double) anDouble);<br>        <span class="hljs-type">Object</span> <span class="hljs-variable">memoryUser</span> <span class="hljs-operator">=</span> redisTemplate.opsForValue().get(<span class="hljs-string">&quot;memoryUser&quot;</span>);<br>        log.info(memoryUser + <span class="hljs-string">&quot;&quot;</span>);<br>        <span class="hljs-comment">// 删</span><br>        redisTemplate.delete(<span class="hljs-string">&quot;memoryInt&quot;</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="增删改查没有问题"><a href="#增删改查没有问题" class="headerlink" title="增删改查没有问题"></a>增删改查没有问题</h5></li>
<li><h5 id="这里存在这样的问题：RedisTemplate-底层的序列化方式，会导致存入的序列化后的value值成为乱码"><a href="#这里存在这样的问题：RedisTemplate-底层的序列化方式，会导致存入的序列化后的value值成为乱码" class="headerlink" title="这里存在这样的问题：RedisTemplate 底层的序列化方式，会导致存入的序列化后的value值成为乱码"></a>这里存在这样的问题：RedisTemplate 底层的序列化方式，会导致存入的序列化后的value值成为乱码</h5></li>
<li><h5 id="StringRedisTemplate-继承了-RedisTemplate-有效解决了这个问题，但只能存放-lt-String，String-gt"><a href="#StringRedisTemplate-继承了-RedisTemplate-有效解决了这个问题，但只能存放-lt-String，String-gt" class="headerlink" title="StringRedisTemplate 继承了 RedisTemplate 有效解决了这个问题，但只能存放&lt;String，String&gt;"></a>StringRedisTemplate 继承了 RedisTemplate 有效解决了这个问题，但只能存放&lt;String，String&gt;</h5></li>
<li><h5 id="综上，我们在使用Redis缓存技术时，可以自己自定义（封装一个）RedisTemplate"><a href="#综上，我们在使用Redis缓存技术时，可以自己自定义（封装一个）RedisTemplate" class="headerlink" title="综上，我们在使用Redis缓存技术时，可以自己自定义（封装一个）RedisTemplate"></a>综上，我们在使用Redis缓存技术时，可以自己自定义（封装一个）RedisTemplate</h5></li>
<li><h5 id="自定义-RedisTemplate-lt-String-Object-gt-config-RedisTemplateConfig"><a href="#自定义-RedisTemplate-lt-String-Object-gt-config-RedisTemplateConfig" class="headerlink" title="自定义 RedisTemplate&lt;String, Object&gt;    (config/RedisTemplateConfig)"></a>自定义 RedisTemplate&lt;String, Object&gt;    (config/RedisTemplateConfig)</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Configuration</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">RedisTemplateConfig</span> &#123;<br>    <span class="hljs-meta">@Bean</span><br>    <span class="hljs-keyword">public</span> RedisTemplate&lt;String, Object&gt; <span class="hljs-title function_">redisTemplate</span><span class="hljs-params">(RedisConnectionFactory connectionFactory)</span> &#123;<br>        <span class="hljs-comment">// 1.创建RedisTemplate对象</span><br>        RedisTemplate&lt;String, Object&gt; redisTemplate = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RedisTemplate</span>&lt;&gt;();<br>        <span class="hljs-comment">// 2.设置连接工厂</span><br>        redisTemplate.setConnectionFactory(connectionFactory);<br>        <span class="hljs-comment">// 3.设置Key的序列化</span><br>        redisTemplate.setKeySerializer(RedisSerializer.string());<br>        <span class="hljs-comment">// 4.创建JSON序列化工具</span><br>        <span class="hljs-type">GenericJackson2JsonRedisSerializer</span> <span class="hljs-variable">jsonRedisSerializer</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">GenericJackson2JsonRedisSerializer</span>();<br>        <span class="hljs-comment">// 5.设置value的序列化</span><br>        redisTemplate.setValueSerializer(jsonRedisSerializer);<br>        <span class="hljs-keyword">return</span> redisTemplate;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="接下来，就要修改原分页查询用户信息的逻辑代码了"><a href="#接下来，就要修改原分页查询用户信息的逻辑代码了" class="headerlink" title="接下来，就要修改原分页查询用户信息的逻辑代码了"></a>接下来，就要修改原分页查询用户信息的逻辑代码了</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 展示所有用户信息</span><br><span class="hljs-comment">    * Redis缓存</span><br><span class="hljs-comment">    * 分页查询</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> currentPage 当前页</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> pageSize    每页显示数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 用户列表</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> Page&lt;User&gt; <span class="hljs-title function_">selectPage</span><span class="hljs-params">(<span class="hljs-type">long</span> currentPage, <span class="hljs-type">long</span> pageSize, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 获取当前登录用户</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>       <span class="hljs-comment">// 拿到当前登录用户的key(每个用户都有各自对应的key)</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">redisKey</span> <span class="hljs-operator">=</span> String.format(<span class="hljs-string">&quot;memory:user:recommend:%s&quot;</span>, loginUser.getId());<br>       <span class="hljs-comment">// 查缓存</span><br>       Page&lt;User&gt; userPage = (Page&lt;User&gt;) redisTemplate.opsForValue().get(redisKey);<br>       <span class="hljs-comment">// 缓存未中, 则返回用户信息</span><br>       <span class="hljs-keyword">if</span> (userPage != <span class="hljs-literal">null</span>) &#123;<br>           <span class="hljs-keyword">return</span> userPage;<br>       &#125;<br>       <span class="hljs-comment">// 缓存未命中, 查询数据库</span><br>       LambdaQueryWrapper&lt;User&gt; lqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">LambdaQueryWrapper</span>&lt;&gt;();<br>       userPage = userMapper.selectPage(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Page</span>&lt;&gt;(currentPage, pageSize), lqw);<br>       <span class="hljs-comment">// 将查询到的用户信息写到缓存中</span><br>       <span class="hljs-keyword">try</span> &#123;<br>           redisTemplate.opsForValue().set(redisKey, userPage, <span class="hljs-number">30000</span>, TimeUnit.MILLISECONDS);<br>       &#125; <span class="hljs-keyword">catch</span> (Exception e) &#123;<br>           log.error(<span class="hljs-string">&quot;redis set key error&quot;</span>, e);<br>       &#125;<br>       <span class="hljs-comment">// 返回用户数据</span><br>       <span class="hljs-keyword">return</span> userPage;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="那首次查询是不是不走缓存，只能走数据库了？那我们就要实现缓存预热，定时缓存"><a href="#那首次查询是不是不走缓存，只能走数据库了？那我们就要实现缓存预热，定时缓存" class="headerlink" title="那首次查询是不是不走缓存，只能走数据库了？那我们就要实现缓存预热，定时缓存"></a>那首次查询是不是不走缓存，只能走数据库了？那我们就要实现缓存预热，定时缓存</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/15 15:22</span><br><span class="hljs-comment"> * Function: 缓存预热</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-meta">@Component</span><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">PreCacheJob</span> &#123;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> UserService userService;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> RedisTemplate&lt;String, Object&gt; redisTemplate;<br>    <span class="hljs-comment">// 重点用户id(提供推送的用户id)</span><br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> List&lt;Long&gt; mainUserList = List.of(<span class="hljs-number">1L</span>);<br>    <span class="hljs-comment">// 每天执行，预热推荐用户</span><br>    <span class="hljs-meta">@Scheduled(cron = &quot;0 * * * *  *&quot;)</span>   <span class="hljs-comment">//自己设置时间测试</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">doCacheRecommendUser2</span><span class="hljs-params">()</span> &#123;<br>      <span class="hljs-comment">// 遍历每个重点用户</span><br>      <span class="hljs-keyword">for</span> (Long userId : mainUserList) &#123;<br>           QueryWrapper&lt;User&gt; qw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>           <span class="hljs-comment">// 分页查询用户信息</span><br>           Page&lt;User&gt; userPage = userService.page(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Page</span>&lt;&gt;(<span class="hljs-number">1</span>, <span class="hljs-number">20</span>), qw);<br>           <span class="hljs-comment">// 为每个重点用户设置预查询锁</span><br>           <span class="hljs-type">String</span> <span class="hljs-variable">redisKey</span> <span class="hljs-operator">=</span> String.format(<span class="hljs-string">&quot;memory:user:recommend:%s&quot;</span>, userId);<br>           <span class="hljs-comment">//写缓存,30s过期</span><br>           <span class="hljs-keyword">try</span> &#123;<br>               redisTemplate.opsForValue().set(redisKey, userPage, <span class="hljs-number">30000</span>, TimeUnit.MILLISECONDS);<br>           &#125; <span class="hljs-keyword">catch</span> (Exception e) &#123;<br>               log.error(<span class="hljs-string">&quot;redis set key error&quot;</span>, e);<br>           &#125;<br>        &#125;<br>    &#125;<br></code></pre></td></tr></table></figure>

<h1 id="分布式锁"><a href="#分布式锁" class="headerlink" title="分布式锁"></a>分布式锁</h1><ul>
<li><h5 id="问题来了，在实际工作中，我们面对的往往是集群服务器，难道在某一刻每台服务器都要执行预热缓存用户吗？"><a href="#问题来了，在实际工作中，我们面对的往往是集群服务器，难道在某一刻每台服务器都要执行预热缓存用户吗？" class="headerlink" title="问题来了，在实际工作中，我们面对的往往是集群服务器，难道在某一刻每台服务器都要执行预热缓存用户吗？"></a>问题来了，在实际工作中，我们面对的往往是集群服务器，难道在某一刻每台服务器都要执行预热缓存用户吗？</h5></li>
<li><h5 id="显然不需要。我们只需要一台服务器成功缓存到用户就行了。"><a href="#显然不需要。我们只需要一台服务器成功缓存到用户就行了。" class="headerlink" title="显然不需要。我们只需要一台服务器成功缓存到用户就行了。"></a>显然不需要。我们只需要一台服务器成功缓存到用户就行了。</h5></li>
<li><h5 id="要控制定时任务在同一时间只有-1-个服务器能执行。（怎么做？）"><a href="#要控制定时任务在同一时间只有-1-个服务器能执行。（怎么做？）" class="headerlink" title="要控制定时任务在同一时间只有 1 个服务器能执行。（怎么做？）"></a>要控制定时任务在同一时间只有 1 个服务器能执行。（怎么做？）</h5></li>
<li><p>分离定时任务程序和主程序，只在 1 个服务器运行定时任务。成本太大</p>
</li>
<li><p>写死配置，每个服务器都执行定时任务，但是只有 ip 符合配置的服务器才真实执行业务逻辑，其他的直接返回。成本最低；但是我们的 IP 可能是不固定的，把 IP 写的太死了</p>
</li>
<li><p>动态配置，配置是可以轻松的、很方便地更新的（<strong>代码无需重启</strong>），但是只有 ip 符合配置的服务器才真实执行业务逻辑。问题：服务器多了、IP 不可控还是很麻烦，还是要人工修改</p>
</li>
<li><ul>
<li>数据库</li>
<li>Redis</li>
<li>配置中心（Nacos、Apollo、Spring Cloud Config）</li>
</ul>
</li>
<li><p>分布式锁，只有抢到锁的服务器才能执行业务逻辑。坏处：增加成本；好处：不用手动配置，多少个服务器都一样。</p>
</li>
<li><h5 id="单机就会存在单点故障。"><a href="#单机就会存在单点故障。" class="headerlink" title="单机就会存在单点故障。"></a>单机就会存在单点故障。</h5></li>
<li><h5 id="多的概念在这里不再赘述，可以去看鱼皮的项目笔记，分布式锁实现原理以及注意事项讲的很清楚"><a href="#多的概念在这里不再赘述，可以去看鱼皮的项目笔记，分布式锁实现原理以及注意事项讲的很清楚" class="headerlink" title="多的概念在这里不再赘述，可以去看鱼皮的项目笔记，分布式锁实现原理以及注意事项讲的很清楚"></a>多的概念在这里不再赘述，可以去看鱼皮的项目笔记，分布式锁实现原理以及注意事项讲的很清楚</h5></li>
</ul>
<h2 id="Redisson-实现分布式锁"><a href="#Redisson-实现分布式锁" class="headerlink" title="Redisson 实现分布式锁"></a>Redisson 实现分布式锁</h2><ul>
<li><h5 id="Java-客户端，数据网格，实现了很多-Java-里支持的接口和数据结构"><a href="#Java-客户端，数据网格，实现了很多-Java-里支持的接口和数据结构" class="headerlink" title="Java 客户端，数据网格，实现了很多 Java 里支持的接口和数据结构"></a>Java 客户端，数据网格，实现了很多 Java 里支持的接口和数据结构</h5></li>
</ul>
<ul>
<li><h5 id="Redisson-是一个-java-操作-Redis-的客户端"><a href="#Redisson-是一个-java-操作-Redis-的客户端" class="headerlink" title="Redisson 是一个 java 操作 Redis 的客户端"></a>Redisson 是一个 java 操作 Redis 的客户端</h5></li>
<li><h5 id="提供了大量的分布式数据集来简化对-Redis-的操作和使用，可以让开发者像使用本地集合一样使用-Redis，完全感知不到-Redis-的存在。"><a href="#提供了大量的分布式数据集来简化对-Redis-的操作和使用，可以让开发者像使用本地集合一样使用-Redis，完全感知不到-Redis-的存在。" class="headerlink" title="提供了大量的分布式数据集来简化对 Redis 的操作和使用，可以让开发者像使用本地集合一样使用 Redis，完全感知不到 Redis 的存在。"></a>提供了大量的分布式数据集来简化对 Redis 的操作和使用，可以让开发者像使用本地集合一样使用 Redis，完全感知不到 Redis 的存在。</h5></li>
<li><h5 id="那我们就使用redission来快速实现分布式锁控制吧"><a href="#那我们就使用redission来快速实现分布式锁控制吧" class="headerlink" title="那我们就使用redission来快速实现分布式锁控制吧"></a>那我们就使用redission来快速实现分布式锁控制吧</h5></li>
<li><h5 id="导入相关依赖"><a href="#导入相关依赖" class="headerlink" title="导入相关依赖"></a>导入相关依赖</h5></li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-comment">&lt;!--redission--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.redisson<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>redisson<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>3.19.1<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="完成相关配置-config-RedissionConfig-java"><a href="#完成相关配置-config-RedissionConfig-java" class="headerlink" title="完成相关配置    config/RedissionConfig.java"></a>完成相关配置    config/RedissionConfig.java</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Configuration</span><br><span class="hljs-meta">@ConfigurationProperties(prefix = &quot;spring.redis&quot;)</span><br><span class="hljs-meta">@Data</span><br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">RedissionConfig</span> &#123;<br>    <span class="hljs-keyword">private</span> String host;<br><br>    <span class="hljs-keyword">private</span> String port;<br><br>    <span class="hljs-meta">@Bean</span><br>    <span class="hljs-keyword">public</span> RedissonClient <span class="hljs-title function_">redissonClient</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-comment">// 1. 创建配置</span><br>        <span class="hljs-type">Config</span> <span class="hljs-variable">config</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Config</span>();<br>        <span class="hljs-type">String</span> <span class="hljs-variable">redisAddress</span> <span class="hljs-operator">=</span> String.format(<span class="hljs-string">&quot;redis://%s:%s&quot;</span>, host, port);<br>        <span class="hljs-comment">//  使用单个Redis，没有开集群 useClusterServers()  设置地址和使用库</span><br>        config.useSingleServer().setAddress(redisAddress).setDatabase(<span class="hljs-number">3</span>);<br>        <span class="hljs-comment">// 2. 创建实例</span><br>        <span class="hljs-type">RedissonClient</span> <span class="hljs-variable">redisson</span> <span class="hljs-operator">=</span> Redisson.create(config);<br>        <span class="hljs-keyword">return</span> redisson;<br>    &#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="快速测试-test-RedisTest"><a href="#快速测试-test-RedisTest" class="headerlink" title="快速测试    test/RedisTest"></a>快速测试    test/RedisTest</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@SpringBootTest</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">RedissonTest</span> &#123;<br><br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> RedissonClient redissonClient;<br><br>    <span class="hljs-meta">@Test</span><br>    <span class="hljs-keyword">void</span> <span class="hljs-title function_">test</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-comment">// list，数据存在本地 JVM 内存中</span><br>        List&lt;String&gt; list = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>        list.add(<span class="hljs-string">&quot;yupi&quot;</span>);<br>        System.out.println(<span class="hljs-string">&quot;list:&quot;</span> + list.get(<span class="hljs-number">0</span>));<br><br>        list.remove(<span class="hljs-number">0</span>);<br><br>        <span class="hljs-comment">// 数据存在 redis 的内存中</span><br>        RList&lt;String&gt; rList = redissonClient.getList(<span class="hljs-string">&quot;test-list&quot;</span>);<br>        rList.add(<span class="hljs-string">&quot;yupi&quot;</span>);<br>        System.out.println(<span class="hljs-string">&quot;rlist:&quot;</span> + rList.get(<span class="hljs-number">0</span>));<br>		<span class="hljs-comment">// rList.remove(0);</span><br><br>        <span class="hljs-comment">// map</span><br>        Map&lt;String, Integer&gt; map = <span class="hljs-keyword">new</span> <span class="hljs-title class_">HashMap</span>&lt;&gt;();<br>        map.put(<span class="hljs-string">&quot;yupi&quot;</span>, <span class="hljs-number">10</span>);<br>        map.get(<span class="hljs-string">&quot;yupi&quot;</span>);<br><br>        RMap&lt;Object, Object&gt; map1 = redissonClient.getMap(<span class="hljs-string">&quot;test-map&quot;</span>);<br>        map1.put(<span class="hljs-string">&quot;memory&quot;</span>, <span class="hljs-number">12</span>);<br>        map1.put(<span class="hljs-string">&quot;memory2&quot;</span>, <span class="hljs-number">12</span>);<br>        map1.put(<span class="hljs-string">&quot;memory3&quot;</span>, <span class="hljs-number">12</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="改造定时执行任务，用分布式锁实现，以下是实现逻辑："><a href="#改造定时执行任务，用分布式锁实现，以下是实现逻辑：" class="headerlink" title="改造定时执行任务，用分布式锁实现，以下是实现逻辑："></a>改造定时执行任务，用分布式锁实现，以下是实现逻辑：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/15 15:22</span><br><span class="hljs-comment"> * Function: 缓存预热</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-meta">@Component</span><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">PreCacheJob</span> &#123;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> UserService userService;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> RedisTemplate&lt;String, Object&gt; redisTemplate;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> RedissonClient redissonClient;<br>    <span class="hljs-comment">// 重点用户id(提供推送的用户id)</span><br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> List&lt;Long&gt; mainUserList = List.of(<span class="hljs-number">1L</span>);<br>    <span class="hljs-comment">// 每天执行，预热推荐用户</span><br>    <span class="hljs-meta">@Scheduled(cron = &quot;0 * * * *  *&quot;)</span>   <span class="hljs-comment">//自己设置时间测试</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">doCacheRecommendUser</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-comment">// 设置分布式锁</span><br>        <span class="hljs-type">RLock</span> <span class="hljs-variable">lock</span> <span class="hljs-operator">=</span> redissonClient.getLock(<span class="hljs-string">&quot;memory:preCacheJob:doCache:lock&quot;</span>);<br><br>        <span class="hljs-keyword">try</span> &#123;<br>            <span class="hljs-comment">// 如果抢锁成功</span><br>            <span class="hljs-keyword">if</span> (lock.tryLock(<span class="hljs-number">0</span>, -<span class="hljs-number">1</span>, TimeUnit.MILLISECONDS)) &#123;<br>                <span class="hljs-comment">// 遍历每个重点用户</span><br>                <span class="hljs-keyword">for</span> (Long userId : mainUserList) &#123;<br>                    QueryWrapper&lt;User&gt; qw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>                    <span class="hljs-comment">// 分页查询用户信息</span><br>                    Page&lt;User&gt; userPage = userService.page(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Page</span>&lt;&gt;(<span class="hljs-number">1</span>, <span class="hljs-number">20</span>), qw);<br>                    <span class="hljs-comment">// 为每个重点用户设置预查询锁</span><br>                    <span class="hljs-type">String</span> <span class="hljs-variable">redisKey</span> <span class="hljs-operator">=</span> String.format(<span class="hljs-string">&quot;memory:user:recommend:%s&quot;</span>, userId);<br>                    <span class="hljs-comment">//写缓存,30s过期</span><br>                    <span class="hljs-keyword">try</span> &#123;<br>                        redisTemplate.opsForValue().set(redisKey, userPage, <span class="hljs-number">30000</span>, TimeUnit.MILLISECONDS);<br>                    &#125; <span class="hljs-keyword">catch</span> (Exception e) &#123;<br>                        log.error(<span class="hljs-string">&quot;redis set key error&quot;</span>, e);<br>                    &#125;<br>                &#125;<br>            &#125;<br>        &#125; <span class="hljs-keyword">catch</span> (InterruptedException e) &#123;<br>            log.info(<span class="hljs-string">&quot;error = &quot;</span> + e);<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">RuntimeException</span>(e);<br>        &#125; <span class="hljs-keyword">finally</span> &#123;<br>            <span class="hljs-comment">// 如果该分布式锁是自己持有的</span><br>            <span class="hljs-keyword">if</span> (lock.isHeldByCurrentThread()) &#123;<br>                log.info(String.format(<span class="hljs-string">&quot;unlock: %s&quot;</span>, Thread.currentThread().getId()));<br>                <span class="hljs-comment">// 释放锁</span><br>                lock.unlock();<br>            &#125;<br>        &#125;<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这个逻辑就很清晰了，我们多开几个服务器测试一把"><a href="#这个逻辑就很清晰了，我们多开几个服务器测试一把" class="headerlink" title="这个逻辑就很清晰了，我们多开几个服务器测试一把"></a>这个逻辑就很清晰了，我们多开几个服务器测试一把</h5></li>
<li><h5 id="下次再更新这块儿吧，还有很多坑呢"><a href="#下次再更新这块儿吧，还有很多坑呢" class="headerlink" title="下次再更新这块儿吧，还有很多坑呢"></a>下次再更新这块儿吧，还有很多坑呢</h5></li>
</ul>
<h1 id="组队功能"><a href="#组队功能" class="headerlink" title="组队功能"></a>组队功能</h1><h2 id="后端开发"><a href="#后端开发" class="headerlink" title="后端开发"></a>后端开发</h2><ul>
<li><h5 id="队伍表"><a href="#队伍表" class="headerlink" title="队伍表"></a>队伍表</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java">create table <span class="hljs-title function_">team</span><br><span class="hljs-params">(</span><br><span class="hljs-params">    id          bigint auto_increment comment <span class="hljs-string">&#x27;id&#x27;</span> primary key,</span><br><span class="hljs-params">    user_id     bigint                             <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;队长id&#x27;</span>,</span><br><span class="hljs-params">    name        varchar(<span class="hljs-number">256</span>)</span>                       not <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;队伍名称&#x27;</span>,<br>    description <span class="hljs-title function_">varchar</span><span class="hljs-params">(<span class="hljs-number">1024</span>)</span>                      <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;描述&#x27;</span>,<br>    max_num     <span class="hljs-type">int</span>      <span class="hljs-keyword">default</span> <span class="hljs-number">1</span>                 not <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;最大人数&#x27;</span>,<br>    join_num    <span class="hljs-type">int</span>      <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 not <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;已加人数&#x27;</span>,<br>    status      <span class="hljs-type">int</span>      <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 not <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;0 - 公开，1 - 私有，2 - 加密&#x27;</span>,<br>    password    <span class="hljs-title function_">varchar</span><span class="hljs-params">(<span class="hljs-number">512</span>)</span>                       <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;密码&#x27;</span>,<br>    expire_time datetime                           <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;过期时间&#x27;</span>,<br>    create_time datetime <span class="hljs-keyword">default</span> CURRENT_TIMESTAMP <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;创建时间&#x27;</span>,<br>    update_time datetime <span class="hljs-keyword">default</span> CURRENT_TIMESTAMP <span class="hljs-literal">null</span> on update CURRENT_TIMESTAMP,<br>    is_delete   tinyint  <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 not <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;是否删除&#x27;</span><br>)<br>    comment <span class="hljs-string">&#x27;队伍表&#x27;</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="队伍-用户表"><a href="#队伍-用户表" class="headerlink" title="队伍-用户表"></a>队伍-用户表</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs java">create table <span class="hljs-title function_">user_team</span><br><span class="hljs-params">(</span><br><span class="hljs-params">    id          bigint auto_increment comment <span class="hljs-string">&#x27;id&#x27;</span> primary key,</span><br><span class="hljs-params">    user_id     bigint                             <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;用户id&#x27;</span>,</span><br><span class="hljs-params">    team_id     bigint                             <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;队伍id&#x27;</span>,</span><br><span class="hljs-params">    join_time   datetime                           <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;加入时间&#x27;</span>,</span><br><span class="hljs-params">    create_time datetime <span class="hljs-keyword">default</span> CURRENT_TIMESTAMP <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;创建时间&#x27;</span>,</span><br><span class="hljs-params">    update_time datetime <span class="hljs-keyword">default</span> CURRENT_TIMESTAMP <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;修改时间&#x27;</span>,</span><br><span class="hljs-params">    is_delete   tinyint  <span class="hljs-keyword">default</span> <span class="hljs-number">0</span>                 not <span class="hljs-literal">null</span> comment <span class="hljs-string">&#x27;是否删除&#x27;</span></span><br><span class="hljs-params">)</span><br>    comment <span class="hljs-string">&#x27;用户队伍关系&#x27;</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="首先快速开发相关接口，之后再根据业务逻辑优化"><a href="#首先快速开发相关接口，之后再根据业务逻辑优化" class="headerlink" title="首先快速开发相关接口，之后再根据业务逻辑优化"></a>首先快速开发相关接口，之后再根据业务逻辑优化</h5><ul>
<li><h5 id="添加队伍"><a href="#添加队伍" class="headerlink" title="添加队伍"></a>添加队伍</h5></li>
<li><h5 id="删除队伍"><a href="#删除队伍" class="headerlink" title="删除队伍"></a>删除队伍</h5></li>
<li><h5 id="修改队伍"><a href="#修改队伍" class="headerlink" title="修改队伍"></a>修改队伍</h5></li>
<li><h5 id="按队伍id查找队伍"><a href="#按队伍id查找队伍" class="headerlink" title="按队伍id查找队伍"></a>按队伍id查找队伍</h5></li>
<li><h5 id="查找全部队伍"><a href="#查找全部队伍" class="headerlink" title="查找全部队伍"></a>查找全部队伍</h5></li>
</ul>
</li>
<li><h5 id="咱这建表速度还是很快滴"><a href="#咱这建表速度还是很快滴" class="headerlink" title="咱这建表速度还是很快滴~"></a>咱这建表速度还是很快滴~</h5></li>
<li><h5 id="再然后借助MybatisX-Generator快速生成domain、mapper、service和相关注意事项等就不说了"><a href="#再然后借助MybatisX-Generator快速生成domain、mapper、service和相关注意事项等就不说了" class="headerlink" title="再然后借助MybatisX-Generator快速生成domain、mapper、service和相关注意事项等就不说了"></a>再然后借助MybatisX-Generator快速生成domain、mapper、service和相关注意事项等就不说了</h5></li>
</ul>
<h3 id="新增队伍"><a href="#新增队伍" class="headerlink" title="新增队伍"></a>新增队伍</h3><ul>
<li><h5 id="service层"><a href="#service层" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 新增队伍</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> team 队伍</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 队伍id</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-meta">@Transactional</span><br>   <span class="hljs-keyword">public</span> String <span class="hljs-title function_">teamAdd</span><span class="hljs-params">(TeamAdd team, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 1.是否登录，未登录不允许创建</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>       <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>       <span class="hljs-comment">// 2.队伍人数 &gt; 1 且 &lt;= 20</span><br>       <span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br>       <span class="hljs-keyword">if</span> (maxNum &lt; <span class="hljs-number">1</span> || maxNum &gt; <span class="hljs-number">20</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍人数不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 3.队伍标题 &lt;= 20</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">name</span> <span class="hljs-operator">=</span> team.getName();<br>       <span class="hljs-keyword">if</span> (StringUtils.isBlank(name) || name.length() &gt; <span class="hljs-number">20</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍标题不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 4.描述 &lt;= 512</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">description</span> <span class="hljs-operator">=</span> team.getDescription();<br>       <span class="hljs-keyword">if</span> (StringUtils.isBlank(description) || description.length() &gt; <span class="hljs-number">512</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍描述不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 5.status 是否公开（int）不传默认为 0（公开）</span><br>       <span class="hljs-type">int</span> <span class="hljs-variable">status</span> <span class="hljs-operator">=</span> Optional.ofNullable(team.getStatus()).orElse(<span class="hljs-number">0</span>);<br>       <span class="hljs-type">TeamStatusEnum</span> <span class="hljs-variable">statusEnum</span> <span class="hljs-operator">=</span> TeamStatusEnum.getEnumByValue(status);<br>       <span class="hljs-keyword">if</span> (statusEnum == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍状态不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 6.校验队伍密码</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">password</span> <span class="hljs-operator">=</span> team.getPassword();<br>       <span class="hljs-comment">// 6.1.如果队伍非加密, 则不允许设置密码</span><br>       <span class="hljs-keyword">if</span> (statusEnum.getValue() != <span class="hljs-number">2</span>) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isNotBlank(password))<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍密码不符合要求&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 6.2.如果队伍加密, 一定要有密码, 且密码 &lt;= 32</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isBlank(password) || password.length() &gt; <span class="hljs-number">32</span>)<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍密码不符合要求&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 7.当前时间 &gt; 超时时间</span><br>       <span class="hljs-type">Date</span> <span class="hljs-variable">expireTime</span> <span class="hljs-operator">=</span> team.getExpireTime();<br>       <span class="hljs-keyword">if</span> (<span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().after(expireTime))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;超时时间不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 8.校验用户已创建队伍数量(最多创建 5 个队伍)</span><br>       <span class="hljs-type">Long</span> <span class="hljs-variable">userId</span> <span class="hljs-operator">=</span> loginUser.getId();<br>       QueryWrapper&lt;Team&gt; lqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>       lqw.eq(<span class="hljs-string">&quot;user_id&quot;</span>, userId);<br>       <span class="hljs-type">long</span> <span class="hljs-variable">count</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.count(lqw);<br>       <span class="hljs-keyword">if</span> (count &gt;= <span class="hljs-number">5</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;该用户创建队伍数量超出限制&quot;</span>);<br><br>       <span class="hljs-type">Team</span> <span class="hljs-variable">addTeam</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Team</span>();<br>       BeanUtils.copyProperties(team, addTeam);<br><br>       <span class="hljs-comment">// 9.插入队伍信息到team表</span><br>       addTeam.setId(<span class="hljs-literal">null</span>);<br>       addTeam.setUserId(userId);<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">teamSave</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.save(addTeam);<br>       <span class="hljs-keyword">if</span> (!teamSave) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>       <span class="hljs-comment">// 10.插入用户-队伍关系到user_team表</span><br>       <span class="hljs-type">UserTeam</span> <span class="hljs-variable">userTeam</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">UserTeam</span>();<br>       userTeam.setUserId(userId);<br>       userTeam.setTeamId(addTeam.getId());<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">userTeamSave</span> <span class="hljs-operator">=</span> userTeamService.save(userTeam);<br>       <span class="hljs-keyword">if</span> (!userTeamSave) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>       <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;新增队伍成功&quot;</span>;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里status校验要留意，封装一个-constant-TeamStatuaEnum"><a href="#这里status校验要留意，封装一个-constant-TeamStatuaEnum" class="headerlink" title="这里status校验要留意，封装一个 constant/TeamStatuaEnum"></a>这里status校验要留意，封装一个 constant/TeamStatuaEnum</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><code class="hljs java"><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/20 10:36</span><br><span class="hljs-comment"> * Function: 队伍状态枚举</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">enum</span> <span class="hljs-title class_">TeamStatusEnum</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 0 - 公开, 在队伍大厅中可以直接加入</span><br><span class="hljs-comment">     */</span><br>    PUBLIC(<span class="hljs-number">0</span>, <span class="hljs-string">&quot;公开&quot;</span>),<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 1 - 私有, 在队伍大厅中不可以直接加入</span><br><span class="hljs-comment">     */</span><br>    PRIVATE(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;私有&quot;</span>),<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 2 - 公开且加密, 加入队伍需要密码</span><br><span class="hljs-comment">     */</span><br>    SECRET(<span class="hljs-number">2</span>, <span class="hljs-string">&quot;加密&quot;</span>);<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 状态码</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> <span class="hljs-type">int</span> value;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 状态描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String text;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 判断用户状态</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> value 用户状态</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 存在与否</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> TeamStatusEnum <span class="hljs-title function_">getEnumByValue</span><span class="hljs-params">(Integer value)</span> &#123;<br>        <span class="hljs-keyword">if</span> (value == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>        &#125;<br>        TeamStatusEnum[] values = TeamStatusEnum.values();<br>        <span class="hljs-keyword">for</span> (TeamStatusEnum teamStatusEnum : values) &#123;<br>            <span class="hljs-keyword">if</span> (teamStatusEnum.getValue() == value) &#123;<br>                <span class="hljs-keyword">return</span> teamStatusEnum;<br>            &#125;<br>        &#125;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>    &#125;<br><br>    TeamStatusEnum(<span class="hljs-type">int</span> value, String text) &#123;<br>        <span class="hljs-built_in">this</span>.value = value;<br>        <span class="hljs-built_in">this</span>.text = text;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> <span class="hljs-type">int</span> <span class="hljs-title function_">getValue</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-keyword">return</span> value;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">setValue</span><span class="hljs-params">(<span class="hljs-type">int</span> value)</span> &#123;<br>        <span class="hljs-built_in">this</span>.value = value;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getText</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-keyword">return</span> text;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">setText</span><span class="hljs-params">(String text)</span> &#123;<br>        <span class="hljs-built_in">this</span>.text = text;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="提醒一下，Enum枚举类不支持-Data注解哦"><a href="#提醒一下，Enum枚举类不支持-Data注解哦" class="headerlink" title="提醒一下，Enum枚举类不支持@Data注解哦"></a>提醒一下，Enum枚举类不支持@Data注解哦</h5></li>
<li><h5 id="再封装一个-model-request-TeamAdd，前端人员无需自行筛选填写哪些字段，这里还涉及到了-BeanUtils-的用法"><a href="#再封装一个-model-request-TeamAdd，前端人员无需自行筛选填写哪些字段，这里还涉及到了-BeanUtils-的用法" class="headerlink" title="再封装一个 /model/request/TeamAdd，前端人员无需自行筛选填写哪些字段，这里还涉及到了 BeanUtils 的用法"></a>再封装一个 /model/request/TeamAdd，前端人员无需自行筛选填写哪些字段，这里还涉及到了 BeanUtils 的用法</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/20 14:22</span><br><span class="hljs-comment"> * Function: 新增队伍参数</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TeamAdd</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队伍名称</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String description;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 最大人数</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer maxNum;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 过期时间</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Date expireTime;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 0 - 公开，1 - 私有，2 - 加密</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 密码</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String password;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="controller层-1"><a href="#controller层-1" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 新增队伍</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> team    新增队伍参数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 新增成功与否</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@PostMapping(&quot;/add&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">teamAdd</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> TeamAdd team, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// controller对参数的校验</span><br>       <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>       <span class="hljs-type">String</span> <span class="hljs-variable">teamAdd</span> <span class="hljs-operator">=</span> teamService.teamAdd(team, request);<br>       <span class="hljs-keyword">return</span> ResultUtils.success(teamAdd);<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="完成了，新增队伍功能暂时告一段落"><a href="#完成了，新增队伍功能暂时告一段落" class="headerlink" title="完成了，新增队伍功能暂时告一段落"></a>完成了，新增队伍功能暂时告一段落</h5></li>
</ul>
<h2 id="阶段性问题"><a href="#阶段性问题" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ol>
<li><h5 id="使用-Swagger-接口文档快速测试，这里访问文档还报错了，在启动类上加了-EnableSwagger2WebMvc-就解决了"><a href="#使用-Swagger-接口文档快速测试，这里访问文档还报错了，在启动类上加了-EnableSwagger2WebMvc-就解决了" class="headerlink" title="使用 Swagger 接口文档快速测试，这里访问文档还报错了，在启动类上加了 @EnableSwagger2WebMvc 就解决了"></a>使用 Swagger 接口文档快速测试，这里访问文档还报错了，在启动类上加了 @EnableSwagger2WebMvc 就解决了</h5></li>
<li><h5 id="奶奶的想启动个前端登陆一下还他妈报错启动失败，看了一下是我的node没了（鬼删的？）导致npm环境变量没配好"><a href="#奶奶的想启动个前端登陆一下还他妈报错启动失败，看了一下是我的node没了（鬼删的？）导致npm环境变量没配好" class="headerlink" title="奶奶的想启动个前端登陆一下还他妈报错启动失败，看了一下是我的node没了（鬼删的？）导致npm环境变量没配好"></a>奶奶的想启动个前端登陆一下还他妈报错启动失败，看了一下是我的node没了（鬼删的？）导致npm环境变量没配好</h5></li>
<li><h5 id="看了眼环境变量，真几把乱，我就纳闷了我记得很整洁来着，很快就搞好了"><a href="#看了眼环境变量，真几把乱，我就纳闷了我记得很整洁来着，很快就搞好了" class="headerlink" title="看了眼环境变量，真几把乱，我就纳闷了我记得很整洁来着，很快就搞好了"></a>看了眼环境变量，真几把乱，我就纳闷了我记得很整洁来着，很快就搞好了</h5></li>
<li><h5 id="重新捋了一遍通用返回对象，新增了新的异常对象（ErrorCode-errorCode，String-description）"><a href="#重新捋了一遍通用返回对象，新增了新的异常对象（ErrorCode-errorCode，String-description）" class="headerlink" title="重新捋了一遍通用返回对象，新增了新的异常对象（ErrorCode errorCode，String description）"></a>重新捋了一遍通用返回对象，新增了新的异常对象（ErrorCode errorCode，String description）</h5><h5 id="实现思路可以看下通用返回对象-Xmind，具体代码还请跳转至用户中心-开发文档，内容已同步更新"><a href="#实现思路可以看下通用返回对象-Xmind，具体代码还请跳转至用户中心-开发文档，内容已同步更新" class="headerlink" title="实现思路可以看下通用返回对象.Xmind，具体代码还请跳转至用户中心-开发文档，内容已同步更新"></a>实现思路可以看下通用返回对象.Xmind，具体代码还请跳转至用户中心-开发文档，内容已同步更新</h5></li>
<li><h5 id="改了下npm环境变量还手贱删除了nodejs，俺的个人博客都被搞垮啦，之后会总结个人博客部署流程的"><a href="#改了下npm环境变量还手贱删除了nodejs，俺的个人博客都被搞垮啦，之后会总结个人博客部署流程的" class="headerlink" title="改了下npm环境变量还手贱删除了nodejs，俺的个人博客都被搞垮啦，之后会总结个人博客部署流程的"></a>改了下npm环境变量还手贱删除了nodejs，俺的个人博客都被搞垮啦，之后会总结个人博客部署流程的</h5></li>
<li><h5 id="team表添加了join-num字段，存储当前队伍已加人数，记得同步修改更新xml、mapper、domain"><a href="#team表添加了join-num字段，存储当前队伍已加人数，记得同步修改更新xml、mapper、domain" class="headerlink" title="team表添加了join_num字段，存储当前队伍已加人数，记得同步修改更新xml、mapper、domain"></a>team表添加了join_num字段，存储当前队伍已加人数，记得同步修改更新xml、mapper、domain</h5></li>
</ol>
<h3 id="查询队伍"><a href="#查询队伍" class="headerlink" title="查询队伍"></a>查询队伍</h3><ul>
<li><h5 id="service层-1"><a href="#service层-1" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 查询队伍(分页查询)</span><br><span class="hljs-comment">   *</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> team 查询参数</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span> 符合条件的队伍</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@Override</span><br>  <span class="hljs-keyword">public</span> Page&lt;Team&gt; <span class="hljs-title function_">teamList</span><span class="hljs-params">(TeamQuery team, HttpServletRequest request)</span> &#123;<br>      <span class="hljs-comment">// 登录校验</span><br>      <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>      <span class="hljs-keyword">if</span> (loginUser != <span class="hljs-literal">null</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>      QueryWrapper&lt;Team&gt; tqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br><br>      <span class="hljs-comment">// 1.根据队伍名查询</span><br>      <span class="hljs-type">String</span> <span class="hljs-variable">name</span> <span class="hljs-operator">=</span> team.getName();<br>      <span class="hljs-keyword">if</span> (StringUtils.isBlank(name) || name.length() &gt; <span class="hljs-number">20</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍名不符合要求&quot;</span>);<br>      tqw.like(<span class="hljs-string">&quot;name&quot;</span>, name);<br><br>      <span class="hljs-comment">// 2.根据队伍描述查询</span><br>      <span class="hljs-type">String</span> <span class="hljs-variable">description</span> <span class="hljs-operator">=</span> team.getDescription();<br>      <span class="hljs-keyword">if</span> (StringUtils.isBlank(description) || description.length() &gt; <span class="hljs-number">512</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍描述不符合要求&quot;</span>);<br>      tqw.like(<span class="hljs-string">&quot;description&quot;</span>, description);<br><br>      <span class="hljs-comment">// 3.根据队长id查询</span><br>      <span class="hljs-type">Long</span> <span class="hljs-variable">userId</span> <span class="hljs-operator">=</span> team.getUserId();<br>      <span class="hljs-keyword">if</span> (userId == <span class="hljs-literal">null</span> || userId &lt; <span class="hljs-number">0</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队长id不符合要求&quot;</span>);<br>      tqw.eq(<span class="hljs-string">&quot;user_id&quot;</span>, userId);<br><br>      <span class="hljs-comment">// 4.根据最大人数查询</span><br>      <span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br>      <span class="hljs-keyword">if</span> (maxNum == <span class="hljs-literal">null</span> || maxNum &lt; <span class="hljs-number">0</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍最大人数不符合要求&quot;</span>);<br>      tqw.eq(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum);<br><br>      <span class="hljs-comment">// 5.根据队伍状态查询</span><br>      <span class="hljs-type">Integer</span> <span class="hljs-variable">status</span> <span class="hljs-operator">=</span> team.getStatus();<br>      <span class="hljs-type">TeamStatusEnum</span> <span class="hljs-variable">statusEnum</span> <span class="hljs-operator">=</span> TeamStatusEnum.getEnumByValue(status);<br>      <span class="hljs-keyword">if</span> (statusEnum == <span class="hljs-literal">null</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍状态不符合要求&quot;</span>);<br>      tqw.like(<span class="hljs-string">&quot;status&quot;</span>, status);<br><br>      <span class="hljs-comment">// 6.分页查询</span><br>      Page&lt;Team&gt; teamPage = <span class="hljs-built_in">this</span>.page(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Page</span>&lt;&gt;(<span class="hljs-number">1</span>, <span class="hljs-number">5</span>), tqw);<br>      <span class="hljs-keyword">if</span> (teamPage == <span class="hljs-literal">null</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>      <span class="hljs-keyword">return</span> teamPage;<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="逻辑还是很简单的，前端传param参数，后端接口封装一个队伍查询信息类，再依次对每个字段校验，最后分页查询实现"><a href="#逻辑还是很简单的，前端传param参数，后端接口封装一个队伍查询信息类，再依次对每个字段校验，最后分页查询实现" class="headerlink" title="逻辑还是很简单的，前端传param参数，后端接口封装一个队伍查询信息类，再依次对每个字段校验，最后分页查询实现"></a>逻辑还是很简单的，前端传param参数，后端接口封装一个队伍查询信息类，再依次对每个字段校验，最后分页查询实现</h5></li>
<li><h5 id="这里还遇到一个问题，我写成这样：QueryWrapper-tqw-new-QueryWrapper-lt-gt-team-它的SQL查询语句就默认自带了-where-name-导致-twq-like-“name”-name-失效了，搞了半天才发现"><a href="#这里还遇到一个问题，我写成这样：QueryWrapper-tqw-new-QueryWrapper-lt-gt-team-它的SQL查询语句就默认自带了-where-name-导致-twq-like-“name”-name-失效了，搞了半天才发现" class="headerlink" title="这里还遇到一个问题，我写成这样：QueryWrapper tqw = new QueryWrapper&lt;&gt;(team)   它的SQL查询语句就默认自带了 where name = ? 导致 twq.like(“name”, name) 失效了，搞了半天才发现"></a>这里还遇到一个问题，我写成这样：QueryWrapper<Team> tqw = new QueryWrapper&lt;&gt;(team)   它的SQL查询语句就默认自带了 where name = ? 导致 twq.like(“name”, name) 失效了，搞了半天才发现</h5></li>
<li><h5 id="controller层-2"><a href="#controller层-2" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 查询队伍</span><br><span class="hljs-comment">   * 分页查询</span><br><span class="hljs-comment">   *</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> team 查询队伍参数</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span> 队伍列表</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@GetMapping(&quot;/list/page&quot;)</span><br>  <span class="hljs-keyword">public</span> BaseResponse&lt;Page&lt;Team&gt;&gt; <span class="hljs-title function_">teamList</span><span class="hljs-params">(TeamQuery team, HttpServletRequest request)</span> &#123;<br>      <span class="hljs-comment">// controller对参数的校验</span><br>      <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>      Page&lt;Team&gt; teamPage = teamService.teamList(team, request);<br>      <span class="hljs-keyword">return</span> ResultUtils.success(teamPage);<br>  &#125;<br></code></pre></td></tr></table></figure>

<h3 id="修改队伍-1"><a href="#修改队伍-1" class="headerlink" title="修改队伍"></a>修改队伍</h3><ul>
<li><h5 id="service层-2"><a href="#service层-2" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 修改队伍</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> team 队伍修改信息</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 修改成功与否</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> String <span class="hljs-title function_">teamUpdate</span><span class="hljs-params">(TeamUpdate team, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 校验是否登录</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>       <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>       <span class="hljs-comment">// 1.校验修改权限(只有管理员或队长可以修改)</span><br>       <span class="hljs-keyword">if</span> (!loginUser.getId().equals(team.getUserId()) &amp;&amp; !isAdmin(loginUser))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NO_AUTH, <span class="hljs-string">&quot;非队长且非管理员&quot;</span>);<br><br>       <span class="hljs-comment">// 2.判断队伍是否存在</span><br>       <span class="hljs-type">Long</span> <span class="hljs-variable">id</span> <span class="hljs-operator">=</span> team.getId();<br>       <span class="hljs-keyword">if</span> (id == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>       <span class="hljs-type">Team</span> <span class="hljs-variable">currentTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(id);<br>       <span class="hljs-keyword">if</span> (currentTeam == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;该队伍不存在&quot;</span>);<br><br>       <span class="hljs-comment">// 3.校验队伍名</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">name</span> <span class="hljs-operator">=</span> team.getName();<br>       <span class="hljs-keyword">if</span> (StringUtils.isBlank(name) || name.length() &gt; <span class="hljs-number">20</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍名不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 4.校验队伍描述</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">description</span> <span class="hljs-operator">=</span> team.getDescription();<br>       <span class="hljs-keyword">if</span> (StringUtils.isBlank(description) || description.length() &gt; <span class="hljs-number">512</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍描述不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 5.校验队伍状态</span><br>       <span class="hljs-type">Integer</span> <span class="hljs-variable">status</span> <span class="hljs-operator">=</span> team.getStatus();<br>       <span class="hljs-type">TeamStatusEnum</span> <span class="hljs-variable">statusEnum</span> <span class="hljs-operator">=</span> TeamStatusEnum.getEnumByValue(status);<br>       <span class="hljs-keyword">if</span> (statusEnum == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍状态不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 6.校验队伍密码</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">password</span> <span class="hljs-operator">=</span> team.getPassword();<br>       <span class="hljs-comment">// 6.1.如果队伍非加密, 则不允许设置密码</span><br>       <span class="hljs-keyword">if</span> (!TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isNotBlank(password))<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍密码不符合要求&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 6.2.如果队伍加密, 一定要有密码, 且密码 &lt;= 32</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isBlank(password) || password.length() &gt; <span class="hljs-number">32</span>)<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍密码不符合要求&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 7.更新队伍信息</span><br>       <span class="hljs-type">Team</span> <span class="hljs-variable">updateTeam</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Team</span>();<br>       BeanUtils.copyProperties(team, updateTeam);<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">update</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.updateById(updateTeam);<br>       <span class="hljs-keyword">if</span> (!update)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;修改队伍失败&quot;</span>);<br><br>       <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;修改信息成功&quot;</span>;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="controller层-3"><a href="#controller层-3" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 修改队伍</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> team    修改队伍参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 修改成功游戏</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@PostMapping(&quot;/update&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">teamUpdate</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> TeamUpdate team, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// controller对参数的校验</span><br>        <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>        <span class="hljs-type">String</span> <span class="hljs-variable">teamUpdate</span> <span class="hljs-operator">=</span> teamService.teamUpdate(team, request);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(teamUpdate);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="封装-查询队伍参数-teamQuery"><a href="#封装-查询队伍参数-teamQuery" class="headerlink" title="封装 查询队伍参数 teamQuery"></a>封装 查询队伍参数 teamQuery</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/20 10:10</span><br><span class="hljs-comment"> * Function: 查询队伍参数</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TeamQuery</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队伍名称</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队伍描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String description;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 最大人数</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer maxNum;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队长id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 0 - 公开，1 - 私有，2 - 加密</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="封装-修改队伍参数-teamUpdate"><a href="#封装-修改队伍参数-teamUpdate" class="headerlink" title="封装 修改队伍参数 teamUpdate"></a>封装 修改队伍参数 teamUpdate</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/26 14:00</span><br><span class="hljs-comment"> * Function: 修改队伍参数</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TeamUpdate</span> &#123;<br>    <span class="hljs-comment">/***</span><br><span class="hljs-comment">     * 队伍id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long id;<br><br>    <span class="hljs-comment">/***</span><br><span class="hljs-comment">     * 队长id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队伍名称</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String description;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 0 - 公开，1 - 私有，2 - 加密</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 密码</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String password;<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="阶段性问题-1"><a href="#阶段性问题-1" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="注意到我们查询队伍接收param参数，新增队伍和修改队伍接收JSON参数，记得封装的参数类要实现每个成员属性的get、set方法"><a href="#注意到我们查询队伍接收param参数，新增队伍和修改队伍接收JSON参数，记得封装的参数类要实现每个成员属性的get、set方法" class="headerlink" title="注意到我们查询队伍接收param参数，新增队伍和修改队伍接收JSON参数，记得封装的参数类要实现每个成员属性的get、set方法"></a>注意到我们查询队伍接收param参数，新增队伍和修改队伍接收JSON参数，记得封装的参数类要实现每个成员属性的get、set方法</h5></li>
<li><h5 id="体会到封装参数接受类request的好处，还是那句话，前后端联调更加方便-–-gt-BeanUtils的用法"><a href="#体会到封装参数接受类request的好处，还是那句话，前后端联调更加方便-–-gt-BeanUtils的用法" class="headerlink" title="体会到封装参数接受类request的好处，还是那句话，前后端联调更加方便 –&gt; BeanUtils的用法"></a>体会到封装参数接受类request的好处，还是那句话，前后端联调更加方便 –&gt; BeanUtils的用法</h5></li>
<li><h5 id="优化了相关业务的代码，更加简洁易懂了"><a href="#优化了相关业务的代码，更加简洁易懂了" class="headerlink" title="优化了相关业务的代码，更加简洁易懂了"></a>优化了相关业务的代码，更加简洁易懂了</h5></li>
<li><h5 id="这里应该捋一捋我对相关业务流程的理解的，放到明天啦"><a href="#这里应该捋一捋我对相关业务流程的理解的，放到明天啦" class="headerlink" title="这里应该捋一捋我对相关业务流程的理解的，放到明天啦~"></a>这里应该捋一捋我对相关业务流程的理解的，放到明天啦~</h5></li>
</ul>
<h2 id="业务流程梳理"><a href="#业务流程梳理" class="headerlink" title="业务流程梳理"></a>业务流程梳理</h2><ul>
<li><h5 id="新增队伍-1"><a href="#新增队伍-1" class="headerlink" title="新增队伍"></a>新增队伍</h5></li>
</ul>
<figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs applescript">用户传参：队伍名、描述、最大人数、状态、密码、过期时间<br>（队长<span class="hljs-built_in">id</span>指定、队伍<span class="hljs-built_in">id</span>随机生成、初始化成员数量为<span class="hljs-number">0</span>、创建时间、修改时间、逻辑删除）<br><span class="hljs-number">1.</span>校验是否登录，未登录不允许新增<br><span class="hljs-number">2.</span>队伍名 &lt;= <span class="hljs-number">20</span><br><span class="hljs-number">3.</span>描述 &lt;= <span class="hljs-number">512</span><br><span class="hljs-number">4.</span>队伍人数 &gt; <span class="hljs-number">1</span> 且 &lt;= <span class="hljs-number">20</span><br><span class="hljs-number">5.</span>队伍状态，公开？私有？加密？<br><span class="hljs-number">6.</span>校验队伍密码<br>	<span class="hljs-number">6.1</span>.如果队伍非加密, 则不允许设置密码<br>	<span class="hljs-number">6.2</span>.如果队伍加密, 一定要有密码, 且密码 &lt;= <span class="hljs-number">32</span><br><span class="hljs-number">7.</span>校验过期时间：当前时间 &gt; 过期时间<br><span class="hljs-number">8.</span>校验用户已创建队伍数量(最多创建 <span class="hljs-number">5</span> 个队伍)<br><span class="hljs-number">9.</span>更新team表<br><span class="hljs-number">10.</span>更新user_team表<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="查询队伍-1"><a href="#查询队伍-1" class="headerlink" title="查询队伍"></a>查询队伍</h5></li>
</ul>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs awk">用户传参：队伍名<span class="hljs-regexp">/描述/</span>最大人数<span class="hljs-regexp">/状态/</span>队长id<br>用户可以根据这些参数来筛选队伍：队伍名、描述、最大人数、状态、队长id<br><span class="hljs-number">1</span>.校验是否登录，未登录不允许查询<br><span class="hljs-number">2</span>.根据队伍名查询(&lt;= <span class="hljs-number">20</span>)<br><span class="hljs-number">3</span>.根据描述查询(&lt;= <span class="hljs-number">512</span>)<br><span class="hljs-number">4</span>.根据最大人数查询(&lt;= <span class="hljs-number">20</span>)<br><span class="hljs-number">5</span>.根据状态查询，公开？私有？加密？<br><span class="hljs-number">6</span>.根据队长id查询<br>注：<br>	<span class="hljs-number">0</span> - 公开, 在队伍大厅中可以直接加入<br>	<span class="hljs-number">1</span> - 私有, 在队伍大厅中不可以直接加入<br>	<span class="hljs-number">2</span> - 公开且加密, 加入队伍需要密码<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="修改队伍-2"><a href="#修改队伍-2" class="headerlink" title="修改队伍"></a>修改队伍</h5></li>
</ul>
<figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs applescript">用户传参：队伍<span class="hljs-built_in">id</span>、队长<span class="hljs-built_in">id</span>、队伍名/描述/状态/密码<br>用户可以修改这些队伍信息：队伍名、描述、状态、密码<br>修改队伍参数中还会封装队伍<span class="hljs-built_in">id</span>和队长<span class="hljs-built_in">id</span><br><span class="hljs-number">1.</span>校验是否登录，未登录不允许修改<br><span class="hljs-number">2.</span>校验队伍是否存在<br><span class="hljs-number">3.</span>校验用户是否为队长或管理员，否则不允许修改<br><span class="hljs-number">4.</span>修改队伍名(&lt;= <span class="hljs-number">20</span>)<br><span class="hljs-number">5.</span>修改描述(&lt;= <span class="hljs-number">512</span>)<br><span class="hljs-number">6.</span>修改状态<br>	<span class="hljs-number">7.1</span>.如果修改公开或私有，则不允许设置密码<br>	<span class="hljs-number">7.2</span>.如果修改为加密，则密码不允许为空(&lt;= <span class="hljs-number">32</span>)<br><span class="hljs-number">8.</span>执行更新<br></code></pre></td></tr></table></figure>

<h3 id="用户加入队伍"><a href="#用户加入队伍" class="headerlink" title="用户加入队伍"></a>用户加入队伍</h3><ul>
<li><h5 id="service层-3"><a href="#service层-3" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 加入队伍</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> team    加入队伍参数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 加入队伍成功</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Transactional</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> String <span class="hljs-title function_">joinTeam</span><span class="hljs-params">(TeamJoin team, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 登录校验</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>       <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>       <span class="hljs-comment">// 1.校验队伍是否存在</span><br>       <span class="hljs-type">Long</span> <span class="hljs-variable">id</span> <span class="hljs-operator">=</span> team.getId();<br>       <span class="hljs-keyword">if</span> (id == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>       <span class="hljs-type">Team</span> <span class="hljs-variable">currentTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(id);<br>       <span class="hljs-keyword">if</span> (currentTeam == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;该队伍不存在&quot;</span>);<br><br>       <span class="hljs-type">Integer</span> <span class="hljs-variable">status</span> <span class="hljs-operator">=</span> team.getStatus();<br>       <span class="hljs-type">TeamStatusEnum</span> <span class="hljs-variable">statusEnum</span> <span class="hljs-operator">=</span> TeamStatusEnum.getEnumByValue(status);<br>       <span class="hljs-keyword">if</span> (statusEnum == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍状态不符合要求&quot;</span>);<br><br>       <span class="hljs-comment">// 2.用户不能加入私有队伍</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.PRIVATE.equals(statusEnum))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;不能主动加入私有队伍&quot;</span>);<br><br>       <span class="hljs-type">String</span> <span class="hljs-variable">password</span> <span class="hljs-operator">=</span> team.getPassword();<br><br>       <span class="hljs-comment">// 校验密码</span><br>       <span class="hljs-comment">// 3.1.用户加入加密队伍必须输入密码</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isBlank(password) || password.length() &gt; <span class="hljs-number">32</span>)<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;加入加密队伍要提供正确的密码&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 3.2.用户加入公开队伍不需要密码</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isNotBlank(password))<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;加入公开队伍无需密码&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 4.同一用户最多加入5个队伍</span><br>       QueryWrapper&lt;UserTeam&gt; utqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>       <span class="hljs-type">Long</span> <span class="hljs-variable">userId</span> <span class="hljs-operator">=</span> loginUser.getId();<br>       utqw.eq(<span class="hljs-string">&quot;user_id&quot;</span>, userId);<br>       <span class="hljs-type">long</span> <span class="hljs-variable">count</span> <span class="hljs-operator">=</span> userTeamService.count(utqw);<br>       <span class="hljs-keyword">if</span> (count &gt;= <span class="hljs-number">5</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;该用户加入队伍已达上限&quot;</span>);<br><br>       <span class="hljs-comment">// 5.不能重复加入已加入的队伍</span><br>       utqw.eq(<span class="hljs-string">&quot;team_id&quot;</span>, team.getId());<br>       count = userTeamService.count(utqw);<br>       <span class="hljs-keyword">if</span> (count &gt; <span class="hljs-number">0</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;您已在该队伍中&quot;</span>);<br><br>       <span class="hljs-comment">// 6.不能加入满员的队伍</span><br>       <span class="hljs-type">Integer</span> <span class="hljs-variable">joinNum</span> <span class="hljs-operator">=</span> team.getJoinNum();<br>       <span class="hljs-keyword">if</span> (joinNum &gt;= team.getMaxNum())<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;该队伍已满员&quot;</span>);<br><br>       <span class="hljs-comment">// 7.更新team表队伍成员数量</span><br>       UpdateWrapper&lt;Team&gt; tuw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">UpdateWrapper</span>&lt;&gt;();<br>       <span class="hljs-type">Long</span> <span class="hljs-variable">teamId</span> <span class="hljs-operator">=</span> team.getId();<br>       tuw.eq(<span class="hljs-string">&quot;id&quot;</span>, teamId).set(<span class="hljs-string">&quot;join_user&quot;</span>, ++joinNum);<br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">updateTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.update(tuw);<br><br>       <span class="hljs-comment">// 8.插入用户-队伍关系到user_team表</span><br>       <span class="hljs-type">UserTeam</span> <span class="hljs-variable">userTeam</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">UserTeam</span>();<br>       userTeam.setUserId(userId);<br>       userTeam.setTeamId(teamId);<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">saveUserTeam</span> <span class="hljs-operator">=</span> userTeamService.save(userTeam);<br><br>       <span class="hljs-keyword">if</span> (!updateTeam || !saveUserTeam)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;用户加入队伍失败&quot;</span>);<br><br>       <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;加入队伍成功&quot;</span>;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="controller层-4"><a href="#controller层-4" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 加入队伍</span><br><span class="hljs-comment">   *</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> team    加入队伍参数</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span> 加入队伍成功</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@PostMapping(&quot;/join&quot;)</span><br>  <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">joinTeam</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> TeamJoin team, HttpServletRequest request)</span> &#123;<br>      <span class="hljs-comment">// controller对参数的校验</span><br>      <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>)<br>          <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>      <span class="hljs-type">String</span> <span class="hljs-variable">joinTeam</span> <span class="hljs-operator">=</span> teamService.joinTeam(team, request);<br>      <span class="hljs-keyword">return</span> ResultUtils.success(joinTeam);<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="封装-加入队伍参数-teamJoin"><a href="#封装-加入队伍参数-teamJoin" class="headerlink" title="封装 加入队伍参数 teamJoin"></a>封装 加入队伍参数 teamJoin</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/27 21:04</span><br><span class="hljs-comment"> * Function: 加入队伍参数</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TeamJoin</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队伍id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long id;<br>    <br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队长id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 最大人数</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer maxNum;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 0 - 公开，1 - 私有，2 - 加密</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 密码</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String password;<br><br>	<span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 成员数量</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer joinNum;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="还没测试接口呢，写累了，有啥问题明天再看吧"><a href="#还没测试接口呢，写累了，有啥问题明天再看吧" class="headerlink" title="还没测试接口呢，写累了，有啥问题明天再看吧~"></a>还没测试接口呢，写累了，有啥问题明天再看吧~</h5></li>
<li><h5 id="测试结果完美！写下业务流程吧："><a href="#测试结果完美！写下业务流程吧：" class="headerlink" title="测试结果完美！写下业务流程吧："></a>测试结果完美！写下业务流程吧：</h5></li>
</ul>
<figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs applescript">用户传参：队伍<span class="hljs-built_in">id</span>、队伍状态、密码、最大人数、已加入人数<br><span class="hljs-number">1.</span>登录校验<br><span class="hljs-number">2.</span>校验队伍是否存在<br><span class="hljs-number">3.</span>校验状态<br>	<span class="hljs-number">4.1</span>.加入加密队伍必须输入密码<br>	<span class="hljs-number">4.2</span>.加入公开队伍不需要密码<br>	<span class="hljs-number">4.3</span>不能加入私有队伍<br><span class="hljs-number">5.</span>最多加入<span class="hljs-number">5</span>个队伍<br><span class="hljs-number">6.</span>不能重复加入已加入的队伍<br><span class="hljs-number">7.</span>不能加入满员的队伍<br><span class="hljs-number">8.</span>更新team表队伍成员数量<br><span class="hljs-number">9.</span>插入用户-队伍关系到user_team表<br></code></pre></td></tr></table></figure>

<h3 id="用户退出队伍"><a href="#用户退出队伍" class="headerlink" title="用户退出队伍"></a>用户退出队伍</h3><ul>
<li><h5 id="service层-4"><a href="#service层-4" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 退出队伍</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> team    退出队伍参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 退出队伍成功</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Transactional</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">quitTeam</span><span class="hljs-params">(TeamQuit team, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// 1.校验登录</span><br>        <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>        <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>        <span class="hljs-comment">// 2.校验队伍是否存在</span><br>        <span class="hljs-type">Long</span> <span class="hljs-variable">teamId</span> <span class="hljs-operator">=</span> team.getId();<br>        <span class="hljs-keyword">if</span> (teamId == <span class="hljs-literal">null</span> || teamId &lt; <span class="hljs-number">0</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>        <span class="hljs-type">Team</span> <span class="hljs-variable">currentTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(teamId);<br>        <span class="hljs-keyword">if</span> (currentTeam == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;该队伍不存在&quot;</span>);<br><br>        <span class="hljs-comment">// 3.校验用户状态</span><br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">userStatus</span> <span class="hljs-operator">=</span> loginUser.getUserStatus();<br>        <span class="hljs-keyword">if</span> (userStatus == <span class="hljs-number">1</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NO_AUTH, <span class="hljs-string">&quot;该账号已被封&quot;</span>);<br><br>        <span class="hljs-comment">// 4.校验队伍剩余人数</span><br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">joinNum</span> <span class="hljs-operator">=</span> team.getJoinNum();<br>        <span class="hljs-comment">// 4.1.系统错误</span><br>        <span class="hljs-keyword">if</span> (joinNum - <span class="hljs-number">1</span> &lt; <span class="hljs-number">0</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.SYSTEM_ERROR, <span class="hljs-string">&quot;队伍人数为空&quot;</span>);<br><br>        <span class="hljs-comment">// 4.2.队伍人数为空</span><br>        <span class="hljs-keyword">if</span> (joinNum - <span class="hljs-number">1</span> == <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-type">boolean</span> <span class="hljs-variable">remove</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.removeById(teamId);<br>            <span class="hljs-keyword">if</span> (!remove)<br>                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br>        &#125;<br><br>        <span class="hljs-comment">// 4.3.队伍人数未空</span><br>        <span class="hljs-keyword">if</span> (joinNum - <span class="hljs-number">1</span> &gt; <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-comment">// 5.队伍人数-1</span><br>            UpdateWrapper&lt;Team&gt; tuw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">UpdateWrapper</span>&lt;&gt;();<br>            tuw.eq(<span class="hljs-string">&quot;id&quot;</span>, teamId).set(<span class="hljs-string">&quot;join_num&quot;</span>, --joinNum);<br>            <span class="hljs-type">boolean</span> <span class="hljs-variable">updateNum</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.update(tuw);<br>            <span class="hljs-keyword">if</span> (!updateNum)<br>                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>            <span class="hljs-comment">// 6.校验用户为队长(传位)</span><br>            <span class="hljs-keyword">if</span> (team.getUserId().equals(loginUser.getId())) &#123;<br>                <span class="hljs-comment">// 6.1.userTeam表查询: 按加入队伍时间升序排序</span><br>                QueryWrapper&lt;UserTeam&gt; utqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>                utqw.eq(<span class="hljs-string">&quot;team_id&quot;</span>, teamId).orderByAsc(<span class="hljs-string">&quot;create_time&quot;</span>);<br>                List&lt;UserTeam&gt; userTeamList = userTeamService.list(utqw);<br><br>                <span class="hljs-comment">// 6.2.将加入时间第二早的队员指定为队长</span><br>                <span class="hljs-type">UserTeam</span> <span class="hljs-variable">userTeam</span> <span class="hljs-operator">=</span> userTeamList.get(<span class="hljs-number">1</span>);<br>                <span class="hljs-type">Long</span> <span class="hljs-variable">userId</span> <span class="hljs-operator">=</span> userTeam.getUserId();<br>                UpdateWrapper&lt;Team&gt; utuw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">UpdateWrapper</span>&lt;&gt;();<br>                utuw.eq(<span class="hljs-string">&quot;id&quot;</span>, teamId).set(<span class="hljs-string">&quot;user_id&quot;</span>, userId);<br>                <span class="hljs-type">boolean</span> <span class="hljs-variable">updateUser</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.update(utuw);<br>                <span class="hljs-keyword">if</span> (!updateUser)<br>                    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>                <span class="hljs-comment">// 6.3.删除原队长</span><br>                utqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>                utqw.eq(<span class="hljs-string">&quot;user_id&quot;</span>, team.getUserId());<br>                <span class="hljs-type">boolean</span> <span class="hljs-variable">remove</span> <span class="hljs-operator">=</span> userTeamService.remove(utqw);<br>                <span class="hljs-keyword">if</span> (!remove)<br>                    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br>            &#125;<br>        &#125;<br><br>        <span class="hljs-comment">// 6.删除队伍</span><br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;退出队伍成功&quot;</span>;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="controller层-5"><a href="#controller层-5" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 退出队伍</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> team    退出队伍参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 退出队伍成功</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@PostMapping(&quot;/quit&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">quitTeam</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> TeamQuit team, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// controller对参数的校验</span><br>        <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>        <span class="hljs-type">String</span> <span class="hljs-variable">joinTeam</span> <span class="hljs-operator">=</span> teamService.quitTeam(team, request);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(joinTeam);<br>    &#125;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="封装teamQuit对象"><a href="#封装teamQuit对象" class="headerlink" title="封装teamQuit对象"></a>封装teamQuit对象</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/29 21:36</span><br><span class="hljs-comment"> * Function: 退出队伍参数</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TeamQuit</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队伍id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long id;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队长id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 剩余人数</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer joinNum;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="测试了一个小时，总算没问题了，这块儿逻辑还挺缜密的，之后再来梳理业务逻辑吧"><a href="#测试了一个小时，总算没问题了，这块儿逻辑还挺缜密的，之后再来梳理业务逻辑吧" class="headerlink" title="测试了一个小时，总算没问题了，这块儿逻辑还挺缜密的，之后再来梳理业务逻辑吧"></a>测试了一个小时，总算没问题了，这块儿逻辑还挺缜密的，之后再来梳理业务逻辑吧</h5></li>
<li><h5 id="业务流程："><a href="#业务流程：" class="headerlink" title="业务流程："></a>业务流程：</h5></li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs"><br></code></pre></td></tr></table></figure>

<h2 id="思考"><a href="#思考" class="headerlink" title="思考"></a>思考</h2><ul>
<li><h5 id="测试接口永远是最费时间的，我可算理解这句话了"><a href="#测试接口永远是最费时间的，我可算理解这句话了" class="headerlink" title="测试接口永远是最费时间的，我可算理解这句话了"></a>测试接口永远是最费时间的，我可算理解这句话了</h5></li>
</ul>
<h3 id="队长解散队伍"><a href="#队长解散队伍" class="headerlink" title="队长解散队伍"></a>队长解散队伍</h3><ul>
<li><h5 id="service层-5"><a href="#service层-5" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 解散队伍</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> team    解散队伍参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 解散成功与否</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Transactional</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">deleteTeam</span><span class="hljs-params">(TeamDelete team, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// 1.校验登录</span><br>        <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>        <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>        <span class="hljs-comment">// 2.检验队伍是否存在</span><br>        <span class="hljs-type">Long</span> <span class="hljs-variable">teamId</span> <span class="hljs-operator">=</span> team.getId();<br>        <span class="hljs-keyword">if</span> (teamId == <span class="hljs-literal">null</span> || teamId &lt; <span class="hljs-number">0</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>        <span class="hljs-type">Team</span> <span class="hljs-variable">currentTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(teamId);<br>        <span class="hljs-keyword">if</span> (currentTeam == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;该队伍不存在&quot;</span>);<br><br>        <span class="hljs-comment">// 3.校验用户状态</span><br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">userStatus</span> <span class="hljs-operator">=</span> loginUser.getUserStatus();<br>        <span class="hljs-keyword">if</span> (userStatus == <span class="hljs-number">1</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NO_AUTH, <span class="hljs-string">&quot;该账号已被封&quot;</span>);<br><br>        <span class="hljs-comment">// 4.校验权限(是否为队长或管理员)</span><br>        <span class="hljs-keyword">if</span> (!team.getUserId().equals(loginUser.getId()) &amp;&amp; !isAdmin(loginUser))<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NO_AUTH, <span class="hljs-string">&quot;非队长且非管理员&quot;</span>);<br><br>        <span class="hljs-comment">// 5.校验队伍状态</span><br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">status</span> <span class="hljs-operator">=</span> team.getStatus();<br>        <span class="hljs-type">TeamStatusEnum</span> <span class="hljs-variable">statusEnum</span> <span class="hljs-operator">=</span> TeamStatusEnum.getEnumByValue(status);<br>        <span class="hljs-keyword">if</span> (statusEnum == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍状态不符合要求&quot;</span>);<br><br>        <span class="hljs-comment">// 6.校验密码</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">password</span> <span class="hljs-operator">=</span> team.getPassword();<br>        <span class="hljs-comment">// TODO</span><br>        <span class="hljs-comment">// 4.1.解散加密队伍必须输入密码</span><br>        <span class="hljs-keyword">if</span> (TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>            <span class="hljs-keyword">if</span> (StringUtils.isBlank(password) || password.length() &gt; <span class="hljs-number">32</span>)<br>                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;加入加密队伍要提供正确的密码&quot;</span>);<br>        &#125;<br><br>        <span class="hljs-comment">// 4.2.解散公开或私有队伍不需要密码</span><br>        <span class="hljs-keyword">if</span> (TeamStatusEnum.PUBLIC.equals(statusEnum)) &#123;<br>            <span class="hljs-keyword">if</span> (StringUtils.isNotBlank(password))<br>                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;加入公开队伍无需密码&quot;</span>);<br>        &#125;<br><br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;解散队伍成功&quot;</span>;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="controller层-6"><a href="#controller层-6" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 解散队伍</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> team    解散队伍参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 解散成功与否</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@PostMapping(&quot;/delete&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">deleteTeam</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> TeamDelete team, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// controller对参数的校验</span><br>        <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br>        &#125;<br><br>        <span class="hljs-type">String</span> <span class="hljs-variable">deleteTeam</span> <span class="hljs-operator">=</span> teamService.deleteTeam(team, request);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(deleteTeam);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="封装teamDelete对象"><a href="#封装teamDelete对象" class="headerlink" title="封装teamDelete对象"></a>封装teamDelete对象</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/4/30 21:54</span><br><span class="hljs-comment"> * Function: 解散队伍参数</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TeamDelete</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队伍id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 队长id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Long id;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 0 - 公开，1 - 私有，2 - 加密</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 密码</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String password;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="启动项目的时候还出现了一条报错"><a href="#启动项目的时候还出现了一条报错" class="headerlink" title="启动项目的时候还出现了一条报错:"></a>启动项目的时候还出现了一条报错:</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java">Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name <span class="hljs-string">&#x27;requestMappingHandlerMapping&#x27;</span> defined in <span class="hljs-keyword">class</span> <span class="hljs-title class_">path</span> resource [org/springframework/boot/autoconfigure/web/servlet/WebMvcAutoConfiguration$EnableWebMvcConfiguration.class]: Invocation of init method failed; nested exception is java.lang.IllegalStateException: Ambiguous mapping. Cannot map <span class="hljs-string">&#x27;teamController&#x27;</span> method <br>com.memory.usercenter.controller.TeamController#joinTeam(TeamJoin, HttpServletRequest)<br>to &#123;POST [/team/join]&#125;: There is already <span class="hljs-string">&#x27;teamController&#x27;</span> bean method<br>com.memory.usercenter.controller.TeamController#quitTeam(TeamQuit, HttpServletRequest) mapped.<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="什么问题呢，其实就是SpringMVC访问路径冲突，写了俩POST-“-join”"><a href="#什么问题呢，其实就是SpringMVC访问路径冲突，写了俩POST-“-join”" class="headerlink" title="什么问题呢，其实就是SpringMVC访问路径冲突，写了俩POST(“/join”)"></a>什么问题呢，其实就是SpringMVC访问路径冲突，写了俩POST(“/join”)</h5></li>
</ul>
<h3 id="获取当前队伍信息"><a href="#获取当前队伍信息" class="headerlink" title="获取当前队伍信息"></a>获取当前队伍信息</h3><p>service层</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 获取当前队伍信息</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> teamId 队伍id</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 队伍信息</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> Team <span class="hljs-title function_">getTeam</span><span class="hljs-params">(Long teamId, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// 1.校验登录</span><br>        <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>        <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>        <span class="hljs-comment">// 2.检验队伍是否存在</span><br>        <span class="hljs-keyword">if</span> (teamId == <span class="hljs-literal">null</span> || teamId &lt; <span class="hljs-number">0</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>        <span class="hljs-type">Team</span> <span class="hljs-variable">currentTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(teamId);<br>        <span class="hljs-keyword">if</span> (currentTeam == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;该队伍不存在&quot;</span>);<br><br>        <span class="hljs-comment">// 3.校验用户状态</span><br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">userStatus</span> <span class="hljs-operator">=</span> loginUser.getUserStatus();<br>        <span class="hljs-keyword">if</span> (userStatus == <span class="hljs-number">1</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NO_AUTH, <span class="hljs-string">&quot;该账号已被封&quot;</span>);<br><br>        <span class="hljs-comment">// 4.查询队伍信息</span><br>        <span class="hljs-type">Team</span> <span class="hljs-variable">team</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(teamId);<br>        <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>        <span class="hljs-keyword">return</span> getSafetyTeam(team);<br>    &#125;<br><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> List&lt;Team&gt; <span class="hljs-title function_">getJoinedTeam</span><span class="hljs-params">(Long userId, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// 1.校验登录</span><br>        <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>        <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>        <span class="hljs-comment">// 2.获取已加入的队伍</span><br>        QueryWrapper&lt;UserTeam&gt; utqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>        utqw.eq(<span class="hljs-string">&quot;user_id&quot;</span>, userId);<br>        List&lt;UserTeam&gt; userTeamList = userTeamService.list(utqw);<br><br>        List&lt;Team&gt; teamList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br><br>        <span class="hljs-keyword">for</span> (UserTeam userTeam : userTeamList) &#123;<br>            <span class="hljs-type">Long</span> <span class="hljs-variable">teamId</span> <span class="hljs-operator">=</span> userTeam.getTeamId();<br>            <span class="hljs-type">Team</span> <span class="hljs-variable">team</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(teamId);<br>            <span class="hljs-type">Team</span> <span class="hljs-variable">safetyTeam</span> <span class="hljs-operator">=</span> getSafetyTeam(team);<br>            teamList.add(safetyTeam);<br>        &#125;<br><br>        <span class="hljs-keyword">return</span> teamList;<br>    &#125;<br><br><br></code></pre></td></tr></table></figure>

<p>controller层</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 获取当前队伍信息</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> teamId 队伍id</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 队伍信息</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@GetMapping(&quot;/one&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;Team&gt; <span class="hljs-title function_">getTeam</span><span class="hljs-params">(Long teamId, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// controller对参数的校验</span><br>        <span class="hljs-keyword">if</span> (teamId == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br>        &#125;<br><br>        <span class="hljs-type">Team</span> <span class="hljs-variable">team</span> <span class="hljs-operator">=</span> teamService.getTeam(teamId, request);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(team);<br>    &#125;<br></code></pre></td></tr></table></figure>

<h2 id="前端开发"><a href="#前端开发" class="headerlink" title="前端开发"></a>前端开发</h2><h3 id="展示用户已创建队伍"><a href="#展示用户已创建队伍" class="headerlink" title="展示用户已创建队伍"></a>展示用户已创建队伍</h3><h3 id="展示用户已加入队伍"><a href="#展示用户已加入队伍" class="headerlink" title="展示用户已加入队伍"></a>展示用户已加入队伍</h3><ul>
<li><h5 id="pages-teamPage-vue"><a href="#pages-teamPage-vue" class="headerlink" title="pages/teamPage.vue"></a>pages/teamPage.vue</h5></li>
<li><h5 id="代码如下："><a href="#代码如下：" class="headerlink" title="代码如下："></a>代码如下：</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div id=&quot;content&quot; style=&quot;padding-bottom: 30px&quot;&gt;<br>    &lt;!-- &lt;slot&gt; 队伍 &lt;/slot&gt; --&gt;<br>    &lt;van-divider content-position=&quot;left&quot;&gt;我创建的队伍&lt;/van-divider&gt;<br>    &lt;van-card<br>      v-for=&quot;team in teamJoined&quot;<br>      :tag=&quot;team.status&quot;<br>      :title=&quot;team.name&quot;<br>      :desc=&quot;team.description&quot;<br>      thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>    &gt;<br>      &lt;template #bottom&gt;<br>        &lt;div&gt;队伍人数: &#123;&#123; team.joinNum &#125;&#125;/ &#123;&#123; team.maxNum &#125;&#125;&lt;/div&gt;<br>        &lt;div&gt;创建时间: &#123;&#123; team.createTime &#125;&#125;&lt;/div&gt;<br>        &lt;div&gt;解散时间: &#123;&#123; team.expireTime &#125;&#125;&lt;/div&gt;<br>      &lt;/template&gt;<br><br>      &lt;template #footer&gt;<br>        &lt;van-button size=&quot;mini&quot; type=&quot;primary&quot;&gt;修改&lt;/van-button&gt;<br>        &lt;van-button size=&quot;mini&quot; type=&quot;danger&quot;&gt;解散&lt;/van-button&gt;<br>      &lt;/template&gt;<br>    &lt;/van-card&gt;<br><br>    &lt;van-divider content-position=&quot;right&quot;&gt;我加入的队伍&lt;/van-divider&gt;<br>    &lt;van-card<br>      v-for=&quot;team in teamCreated&quot;<br>      :tag=&quot;team.status&quot;<br>      :title=&quot;team.name&quot;<br>      :desc=&quot;team.description&quot;<br>      thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>    &gt;<br>      &lt;template #bottom&gt;<br>        &lt;div&gt;队伍人数: &#123;&#123; team.joinNum &#125;&#125;/ &#123;&#123; team.maxNum &#125;&#125;&lt;/div&gt;<br>        &lt;div&gt;创建时间: &#123;&#123; team.createTime &#125;&#125;&lt;/div&gt;<br>        &lt;div&gt;解散时间: &#123;&#123; team.expireTime &#125;&#125;&lt;/div&gt;<br>      &lt;/template&gt;<br><br>      &lt;template #footer&gt;<br>        &lt;van-button size=&quot;mini&quot; type=&quot;success&quot;&gt;进群聊天&lt;/van-button&gt;<br>      &lt;/template&gt;<br>    &lt;/van-card&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; onMounted &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; requestData, teamType, userType &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../models/user&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; getCurrentUser &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../service/user&quot;</span>;<br><br><span class="hljs-keyword">const</span> loginUser = <span class="hljs-title function_">ref</span>();<br><span class="hljs-keyword">const</span> teamJoined = <span class="hljs-title function_">ref</span>([]);<br><span class="hljs-keyword">const</span> teamCreated = <span class="hljs-title function_">ref</span>([]);<br><br><span class="hljs-comment">// 钩子函数 =&gt; 查询用户已加入的队伍 用户创建的队伍</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>  <span class="hljs-comment">// 校验用户登录</span><br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">user</span>: requestData = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getCurrentUser</span>();<br>  <span class="hljs-keyword">if</span> (user.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;获取用户信息成功&quot;</span>);<br>    loginUser.<span class="hljs-property">value</span> = user.<span class="hljs-property">data</span>;<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;获取用户信息失败&quot;</span>);<br>  &#125;<br>  <span class="hljs-comment">// 发送请求 - 用户已创建的队伍</span><br>  <span class="hljs-keyword">const</span> teamList1 = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/created&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">userId</span>: loginUser.<span class="hljs-property">value</span>.<span class="hljs-property">id</span>,<br>      &#125;,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-comment">// 发送请求 - 用户已加入的队伍</span><br>  <span class="hljs-keyword">const</span> teamList2 = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/joined&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">userId</span>: loginUser.<span class="hljs-property">value</span>.<span class="hljs-property">id</span>,<br>      &#125;,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-comment">// 处理队伍状态</span><br>  <span class="hljs-keyword">if</span> (teamList1 &amp;&amp; teamList2) &#123;<br>    teamList1.<span class="hljs-title function_">forEach</span>(<br>      <span class="hljs-function">(<span class="hljs-params">team: teamType</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;0&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;公开&quot;</span>;<br>        <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;1&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;私有&quot;</span>;<br>        <span class="hljs-keyword">else</span> team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;加密&quot;</span>;<br>      &#125;,<br>      teamList2.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">team: teamType</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;0&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;公开&quot;</span>;<br>        <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;1&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;私有&quot;</span>;<br>        <span class="hljs-keyword">else</span> team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;加密&quot;</span>;<br>      &#125;)<br>    );<br>  &#125;<br>  <span class="hljs-comment">// 拿到数据</span><br>  teamJoined.<span class="hljs-property">value</span> = teamList1;<br>  teamCreated.<span class="hljs-property">value</span> = teamList2;<br>&#125;);<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="models-team-ts"><a href="#models-team-ts" class="headerlink" title="models/team.ts"></a>models/team.ts</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 队伍信息</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">type</span> teamType = &#123;<br>  id?: <span class="hljs-built_in">number</span>;<br>  userId?: <span class="hljs-built_in">number</span>;<br>  name?: <span class="hljs-built_in">string</span>;<br>  description?: <span class="hljs-built_in">string</span>;<br>  maxNum?: <span class="hljs-built_in">number</span>;<br>  joinNum?: <span class="hljs-built_in">number</span>;<br>  status?: <span class="hljs-built_in">string</span>;<br>  expireTime?: <span class="hljs-title class_">Date</span>;<br>  createTime?: <span class="hljs-title class_">Date</span>;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="当然别忘记在config-route-ts下添加路由，这一点在之后的开发中也要注意"><a href="#当然别忘记在config-route-ts下添加路由，这一点在之后的开发中也要注意" class="headerlink" title="当然别忘记在config/route.ts下添加路由，这一点在之后的开发中也要注意"></a>当然别忘记在config/route.ts下添加路由，这一点在之后的开发中也要注意</h5></li>
</ul>
<h2 id="阶段性问题-2"><a href="#阶段性问题-2" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="首先这一段逻辑很简单：登录用户的id做参数，拿到其已加入的队伍"><a href="#首先这一段逻辑很简单：登录用户的id做参数，拿到其已加入的队伍" class="headerlink" title="首先这一段逻辑很简单：登录用户的id做参数，拿到其已加入的队伍"></a>首先这一段逻辑很简单：登录用户的id做参数，拿到其已加入的队伍</h5></li>
<li><h5 id="一如既往地使用-Card-商品组件"><a href="#一如既往地使用-Card-商品组件" class="headerlink" title="一如既往地使用 Card 商品组件"></a>一如既往地使用 Card 商品组件</h5></li>
<li><h5 id="我写这一段还是挺轻松的，虽然不熟练，写的慢，但是很轻松快乐哈"><a href="#我写这一段还是挺轻松的，虽然不熟练，写的慢，但是很轻松快乐哈" class="headerlink" title="我写这一段还是挺轻松的，虽然不熟练，写的慢，但是很轻松快乐哈"></a>我写这一段还是挺轻松的，虽然不熟练，写的慢，但是很轻松快乐哈</h5></li>
<li><h5 id="需要注意的点有这些："><a href="#需要注意的点有这些：" class="headerlink" title="需要注意的点有这些："></a>需要注意的点有这些：</h5></li>
<li><h5 id="van-card-的属性使用方法：-lt-template-buttom-gt-等"><a href="#van-card-的属性使用方法：-lt-template-buttom-gt-等" class="headerlink" title="van-card 的属性使用方法：&lt;template #buttom&gt; 等"></a>van-card 的属性使用方法：&lt;template #buttom&gt; 等</h5></li>
<li><h5 id="对了，像咱们这种表单页，还得微调内边距啥的，自己看着用最简单的HTML-CSS做就可以凑合实现"><a href="#对了，像咱们这种表单页，还得微调内边距啥的，自己看着用最简单的HTML-CSS做就可以凑合实现" class="headerlink" title="对了，像咱们这种表单页，还得微调内边距啥的，自己看着用最简单的HTML+CSS做就可以凑合实现"></a>对了，像咱们这种表单页，还得微调内边距啥的，自己看着用最简单的HTML+CSS做就可以凑合实现</h5></li>
<li><h5 id="奶奶的，打算趁热打铁开发修改队伍页面的，发现这个表单写起来还挺生疏，就先开发新增队伍页面吧"><a href="#奶奶的，打算趁热打铁开发修改队伍页面的，发现这个表单写起来还挺生疏，就先开发新增队伍页面吧" class="headerlink" title="奶奶的，打算趁热打铁开发修改队伍页面的，发现这个表单写起来还挺生疏，就先开发新增队伍页面吧"></a>奶奶的，打算趁热打铁开发修改队伍页面的，发现这个表单写起来还挺生疏，就先开发新增队伍页面吧</h5></li>
</ul>
<h3 id="新增队伍-2"><a href="#新增队伍-2" class="headerlink" title="新增队伍"></a>新增队伍</h3><ul>
<li><h5 id="pages-teamAddPage-vue"><a href="#pages-teamAddPage-vue" class="headerlink" title="pages/teamAddPage.vue"></a>pages/teamAddPage.vue</h5></li>
<li><h5 id="代码如下：-1"><a href="#代码如下：-1" class="headerlink" title="代码如下："></a>代码如下：</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;!-- &lt;slot&gt;新增队伍&lt;/slot&gt; --&gt;<br>  &lt;div id=&quot;content&quot;&gt;<br>    &lt;van-form @submit=&quot;onSubmit&quot;&gt;<br>      &lt;van-cell-group inset&gt;<br>        &lt;van-field<br>          v-model=&quot;teamAdd.name&quot;<br>          name=&quot;name&quot;<br>          label=&quot;队伍名&quot;<br>          placeholder=&quot;请输入队伍名&quot;<br>          :rules=&quot;[&#123; message: &#x27;请输入队伍名&#x27; &#125;]&quot;<br>        /&gt;<br><br>        &lt;van-field<br>          v-model=&quot;teamAdd.description&quot;<br>          rows=&quot;4&quot;<br>          name=&quot;description&quot;<br>          label=&quot;队伍描述&quot;<br>          type=&quot;textarea&quot;<br>          placeholder=&quot;请输入队伍描述&quot;<br>        /&gt;<br><br>        &lt;van-field name=&quot;maxNum&quot; label=&quot;最大人数&quot;&gt;<br>          &lt;template #input&gt;<br>            &lt;van-stepper v-model=&quot;teamAdd.maxNum&quot; max=&quot;20&quot; min=&quot;2&quot; /&gt;<br>          &lt;/template&gt;<br>        &lt;/van-field&gt;<br><br>        &lt;van-field<br>          v-model=&quot;teamAdd.expireTime&quot;<br>          is-link<br>          readonly<br>          name=&quot;expireTime&quot;<br>          label=&quot;过期时间&quot;<br>          placeholder=&quot;点击选择时间&quot;<br>          @click=&quot;showPicker = true&quot;<br>        /&gt;<br><br>        &lt;van-popup v-model:show=&quot;showPicker&quot; position=&quot;bottom&quot;&gt;<br>          &lt;van-date-picker @confirm=&quot;onConfirm&quot; @cancel=&quot;showPicker = false&quot; /&gt;<br>        &lt;/van-popup&gt;<br><br>        &lt;van-field name=&quot;radio&quot; label=&quot;队伍状态&quot;&gt;<br>          &lt;template #input&gt;<br>            &lt;van-radio-group v-model=&quot;teamAdd.status&quot; direction=&quot;horizontal&quot;&gt;<br>              &lt;van-radio name=&quot;0&quot;&gt;公开&lt;/van-radio&gt;<br>              &lt;van-radio name=&quot;1&quot;&gt;私有&lt;/van-radio&gt;<br>              &lt;van-radio name=&quot;2&quot;&gt;加密&lt;/van-radio&gt;<br>            &lt;/van-radio-group&gt;<br>          &lt;/template&gt;<br>        &lt;/van-field&gt;<br><br>        &lt;van-field<br>          v-if=&quot;Number(teamAdd.status) === 2&quot;<br>          v-model=&quot;teamAdd.password&quot;<br>          type=&quot;password&quot;<br>          name=&quot;password&quot;<br>          label=&quot;密码&quot;<br>          placeholder=&quot;请输入队伍密码&quot;<br>          :rules=&quot;[&#123; required: true, message: &#x27;请填写密码&#x27; &#125;]&quot;<br>        /&gt;<br>      &lt;/van-cell-group&gt;<br><br>      &lt;div style=&quot;margin: 16px&quot;&gt;<br>        &lt;van-button round block type=&quot;primary&quot; native-type=&quot;submit&quot;&gt;<br>          提交<br>        &lt;/van-button&gt;<br>      &lt;/div&gt;<br>    &lt;/van-form&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; showSuccessToast, showFailToast &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><br><span class="hljs-comment">// 日期展示</span><br><span class="hljs-keyword">const</span> showPicker = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params">&#123; selectedValues &#125;</span>) =&gt; &#123;<br>  teamAdd.<span class="hljs-property">value</span>.<span class="hljs-property">expireTime</span> = selectedValues.<span class="hljs-title function_">join</span>(<span class="hljs-string">&quot;/&quot;</span>);<br>  showPicker.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;<br>&#125;;<br><br><span class="hljs-keyword">const</span> initTeam = &#123;<br>  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">description</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">maxNum</span>: <span class="hljs-number">2</span>,<br>  <span class="hljs-attr">expireTime</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">status</span>: <span class="hljs-number">0</span>,<br>  <span class="hljs-attr">password</span>: <span class="hljs-string">&quot;&quot;</span>,<br>&#125;;<br><br><span class="hljs-keyword">const</span> teamAdd = <span class="hljs-title function_">ref</span>(&#123; ...initTeam &#125;);<br><br><span class="hljs-comment">// 提交表单</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onSubmit</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-comment">// 发送请求 - 新增队伍</span><br>  <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/add&quot;</span>, teamAdd.<span class="hljs-property">value</span>)<br>    <span class="hljs-comment">// 响应s</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;response.data = &quot;</span> + response.<span class="hljs-property">data</span>);<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-keyword">if</span> (res) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(res.<span class="hljs-property">data</span>.<span class="hljs-property">data</span>);<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">&quot;新增队伍失败&quot;</span>);<br>  &#125;<br><br>  <span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br>  router.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&quot;/team&quot;</span>);<br><br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;res = &quot;</span> + res);<br>&#125;;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="他奶奶的，这个页面还真不好搞定呢，踩了无数坑，前后拖了3天可算完成了，我简单总结一番："><a href="#他奶奶的，这个页面还真不好搞定呢，踩了无数坑，前后拖了3天可算完成了，我简单总结一番：" class="headerlink" title="他奶奶的，这个页面还真不好搞定呢，踩了无数坑，前后拖了3天可算完成了，我简单总结一番："></a>他奶奶的，这个页面还真不好搞定呢，踩了无数坑，前后拖了3天可算完成了，我简单总结一番：</h5></li>
<li><h5 id="首先就是把那form表单合适的、好用的拿过来，先别管那些数据交互"><a href="#首先就是把那form表单合适的、好用的拿过来，先别管那些数据交互" class="headerlink" title="首先就是把那form表单合适的、好用的拿过来，先别管那些数据交互"></a>首先就是把那form表单合适的、好用的拿过来，先别管那些数据交互</h5></li>
<li><h5 id="然后创建一个对象，成员属性跟表单作数据绑定"><a href="#然后创建一个对象，成员属性跟表单作数据绑定" class="headerlink" title="然后创建一个对象，成员属性跟表单作数据绑定"></a>然后创建一个对象，成员属性跟表单作数据绑定</h5></li>
<li><h5 id="对这些表单的属性都必须有所了解，每个属性是干嘛的都得心知肚明"><a href="#对这些表单的属性都必须有所了解，每个属性是干嘛的都得心知肚明" class="headerlink" title="对这些表单的属性都必须有所了解，每个属性是干嘛的都得心知肚明"></a>对这些表单的属性都必须有所了解，每个属性是干嘛的都得心知肚明</h5></li>
<li><h5 id="简单的比如label、placeholder、type，计步器的max、min，日期的展示逻辑：showPicker-true"><a href="#简单的比如label、placeholder、type，计步器的max、min，日期的展示逻辑：showPicker-true" class="headerlink" title="简单的比如label、placeholder、type，计步器的max、min，日期的展示逻辑：showPicker = true"></a>简单的比如label、placeholder、type，计步器的max、min，日期的展示逻辑：showPicker = true</h5></li>
<li><h5 id="日历的-confirm、-cancel实现逻辑，这些自个儿多写多练就能记住了"><a href="#日历的-confirm、-cancel实现逻辑，这些自个儿多写多练就能记住了" class="headerlink" title="日历的@confirm、@cancel实现逻辑，这些自个儿多写多练就能记住了"></a>日历的@confirm、@cancel实现逻辑，这些自个儿多写多练就能记住了</h5></li>
<li><h5 id="别的不多说了，再说几个注意点"><a href="#别的不多说了，再说几个注意点" class="headerlink" title="别的不多说了，再说几个注意点"></a>别的不多说了，再说几个注意点</h5></li>
</ul>
<h2 id="阶段性问题-3"><a href="#阶段性问题-3" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="这里的对象要声明为响应式的，即：const-teamAdd-ref-…initTeam-，不然作数据绑定的时候会有问题"><a href="#这里的对象要声明为响应式的，即：const-teamAdd-ref-…initTeam-，不然作数据绑定的时候会有问题" class="headerlink" title="这里的对象要声明为响应式的，即：const teamAdd = ref({ …initTeam });，不然作数据绑定的时候会有问题"></a>这里的对象要声明为响应式的，即：const teamAdd = ref({ …initTeam });，不然作数据绑定的时候会有问题</h5></li>
<li><h5 id="提交按钮不用写-click-”onSubmit”了，表单上写过了，否则会连续执行两次提交"><a href="#提交按钮不用写-click-”onSubmit”了，表单上写过了，否则会连续执行两次提交" class="headerlink" title="提交按钮不用写@click=”onSubmit”了，表单上写过了，否则会连续执行两次提交"></a>提交按钮不用写@click=”onSubmit”了，表单上写过了，否则会连续执行两次提交</h5></li>
<li><h5 id="POST请求这里参数我写错了，teamAdd-value写成teadAdd了，请求里的json数据一直请求不到接口"><a href="#POST请求这里参数我写错了，teamAdd-value写成teadAdd了，请求里的json数据一直请求不到接口" class="headerlink" title="POST请求这里参数我写错了，teamAdd.value写成teadAdd了，请求里的json数据一直请求不到接口"></a>POST请求这里参数我写错了，teamAdd.value写成teadAdd了，请求里的json数据一直请求不到接口</h5></li>
<li><h5 id="前端传回的empireTime是yyyy-MM-dd格式的，传到后端还接收不了了，奶奶的测试的时候好端端的"><a href="#前端传回的empireTime是yyyy-MM-dd格式的，传到后端还接收不了了，奶奶的测试的时候好端端的" class="headerlink" title="前端传回的empireTime是yyyy/MM/dd格式的，传到后端还接收不了了，奶奶的测试的时候好端端的"></a>前端传回的empireTime是yyyy/MM/dd格式的，传到后端还接收不了了，奶奶的测试的时候好端端的</h5></li>
<li><h5 id="解决方法：修改后端empireTime字段的Date格式就可以：（暂时先这样解决）"><a href="#解决方法：修改后端empireTime字段的Date格式就可以：（暂时先这样解决）" class="headerlink" title="解决方法：修改后端empireTime字段的Date格式就可以：（暂时先这样解决）"></a>解决方法：修改后端empireTime字段的Date格式就可以：（暂时先这样解决）</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 过期时间</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-meta">@JsonFormat(pattern = &quot;yyyy/MM/dd&quot;)</span><br> <span class="hljs-keyword">private</span> Date expireTime;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这用户加入和创建队伍还显示不正常了，浏览器好多毛病"><a href="#这用户加入和创建队伍还显示不正常了，浏览器好多毛病" class="headerlink" title="这用户加入和创建队伍还显示不正常了，浏览器好多毛病"></a>这用户加入和创建队伍还显示不正常了，浏览器好多毛病</h5></li>
</ul>
<h3 id="修改队伍-3"><a href="#修改队伍-3" class="headerlink" title="修改队伍"></a>修改队伍</h3><ul>
<li><h5 id="快速开发"><a href="#快速开发" class="headerlink" title="快速开发"></a>快速开发</h5></li>
<li><h5 id="新增teamEditPage-新增页面路由”team-edit”"><a href="#新增teamEditPage-新增页面路由”team-edit”" class="headerlink" title="新增teamEditPage, 新增页面路由”team/edit”"></a>新增teamEditPage, 新增页面路由”team/edit”</h5></li>
<li><h5 id="teamPage下跳转修改页面"><a href="#teamPage下跳转修改页面" class="headerlink" title="teamPage下跳转修改页面:"></a>teamPage下跳转修改页面:</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 跳转到修改队伍页</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">toEditTeam</span> = (<span class="hljs-params">id: <span class="hljs-built_in">number</span></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">push</span>(&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team/edit&quot;</span>,<br>    <span class="hljs-attr">query</span>: &#123;<br>      id,<br>    &#125;,<br>  &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="绑定到修改按钮"><a href="#绑定到修改按钮" class="headerlink" title="绑定到修改按钮"></a>绑定到修改按钮</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-button <br>	size=&quot;mini&quot; <br>	type=&quot;primary&quot; <br>	@click=&quot;toEditTeam(team.id)&quot;&gt;<br>     修改<br>&lt;/van-button&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里思路很好，前端跳转页面时传递所需参数（队伍id）"><a href="#这里思路很好，前端跳转页面时传递所需参数（队伍id）" class="headerlink" title="这里思路很好，前端跳转页面时传递所需参数（队伍id）"></a>这里思路很好，前端跳转页面时传递所需参数（队伍id）</h5></li>
<li><h5 id="修改队伍页面"><a href="#修改队伍页面" class="headerlink" title="修改队伍页面"></a>修改队伍页面</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;!-- &lt;slot&gt;新增队伍&lt;/slot&gt; --&gt;<br>  &lt;div id=&quot;content&quot;&gt;<br>    &lt;!-- &lt;slot&gt;修改队伍&lt;/slot&gt; --&gt;<br>    &lt;van-form @submit=&quot;onSubmit&quot;&gt;<br>      &lt;van-cell-group inset&gt;<br>        &lt;van-field<br>          v-model=&quot;teamUpdate.name&quot;<br>          name=&quot;name&quot;<br>          label=&quot;队伍名&quot;<br>          placeholder=&quot;请输入队伍名&quot;<br>          :rules=&quot;[&#123; message: &#x27;请输入队伍名&#x27; &#125;]&quot;<br>        /&gt;<br><br>        &lt;van-field<br>          v-model=&quot;teamUpdate.description&quot;<br>          rows=&quot;4&quot;<br>          name=&quot;description&quot;<br>          label=&quot;队伍描述&quot;<br>          type=&quot;textarea&quot;<br>          placeholder=&quot;请输入队伍描述&quot;<br>        /&gt;<br><br>        &lt;van-field name=&quot;radio&quot; label=&quot;队伍状态&quot;&gt;<br>          &lt;template #input&gt;<br>            &lt;van-radio-group v-model=&quot;checked&quot; direction=&quot;horizontal&quot;&gt;<br>              &lt;van-radio name=&quot;0&quot;&gt;公开&lt;/van-radio&gt;<br>              &lt;van-radio name=&quot;1&quot;&gt;私有&lt;/van-radio&gt;<br>              &lt;van-radio name=&quot;2&quot;&gt;加密&lt;/van-radio&gt;<br>            &lt;/van-radio-group&gt;<br>          &lt;/template&gt;<br>        &lt;/van-field&gt;<br><br>        &lt;van-field<br>          v-if=&quot;Number(checked) === 2&quot;<br>          v-model=&quot;teamUpdate.password&quot;<br>          type=&quot;password&quot;<br>          name=&quot;password&quot;<br>          label=&quot;密码&quot;<br>          placeholder=&quot;请输入队伍密码&quot;<br>          :rules=&quot;[&#123; required: true, message: &#x27;请填写密码&#x27; &#125;]&quot;<br>        /&gt;<br>      &lt;/van-cell-group&gt;<br><br>      &lt;div style=&quot;margin: 16px&quot;&gt;<br>        &lt;van-button round block type=&quot;primary&quot; native-type=&quot;submit&quot;&gt;<br>          提交<br>        &lt;/van-button&gt;<br>      &lt;/div&gt;<br>    &lt;/van-form&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123; onMounted, ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; useRoute &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; showSuccessToast, showFailToast &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><br><span class="hljs-comment">// 队伍状态</span><br><span class="hljs-keyword">const</span> checked = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 修改队伍信息</span><br><span class="hljs-keyword">const</span> teamUpdate = <span class="hljs-title function_">ref</span>(&#123;&#125;);<br><br><span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>();<br><span class="hljs-keyword">const</span> teamId = route.<span class="hljs-property">query</span>.<span class="hljs-property">id</span>;<br><br><span class="hljs-comment">// 钩子函数, 根据队伍id查询队伍信息</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>  <span class="hljs-comment">// console.log(&quot;teamId = &quot; + teamId);</span><br>  <span class="hljs-keyword">const</span> teamData = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/one&quot;</span>, &#123; <span class="hljs-attr">params</span>: &#123; teamId &#125; &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;response.data = &quot;</span> + response.<span class="hljs-property">data</span>);<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-keyword">if</span> (teamData) &#123;<br>    teamUpdate.<span class="hljs-property">value</span> = teamData;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;stasus = &quot;</span> + <span class="hljs-keyword">typeof</span> teamData.<span class="hljs-property">status</span>);<br>    checked.<span class="hljs-property">value</span> = <span class="hljs-string">`<span class="hljs-subst">$&#123;teamData.status&#125;</span>`</span>;<br><br>    <span class="hljs-keyword">if</span> (teamData.<span class="hljs-property">status</span> == <span class="hljs-number">2</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;psd = &quot;</span> + teamData.<span class="hljs-property">password</span>);<br>    &#125;<br>  &#125;<br>&#125;);<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="修改页面钩子函数根据teamId查询发送请求get-“-team-one”-查询到队伍信息，将队伍信息绑定表单"><a href="#修改页面钩子函数根据teamId查询发送请求get-“-team-one”-查询到队伍信息，将队伍信息绑定表单" class="headerlink" title="修改页面钩子函数根据teamId查询发送请求get(“/team/one”)查询到队伍信息，将队伍信息绑定表单"></a>修改页面钩子函数根据teamId查询发送请求get(“/team/one”)查询到队伍信息，将队伍信息绑定表单</h5></li>
<li><h5 id="提交表单，发送修改请求"><a href="#提交表单，发送修改请求" class="headerlink" title="提交表单，发送修改请求"></a>提交表单，发送修改请求</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 提交表单</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onSubmit</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-comment">// 发送请求 - 新增队伍</span><br>  <span class="hljs-keyword">const</span> update = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/update&quot;</span>, teamUpdate.<span class="hljs-property">value</span>)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;response.data = &quot;</span> + response.<span class="hljs-property">data</span>);<br>      <span class="hljs-keyword">return</span> response;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-keyword">if</span> (update.<span class="hljs-property">code</span> == <span class="hljs-number">0</span>) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(update.<span class="hljs-property">data</span>);<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">&quot;修改队伍失败&quot;</span>);<br>  &#125;<br><br>  <span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br>  router.<span class="hljs-title function_">push</span>(<span class="hljs-string">&quot;/team&quot;</span>);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="功能大概实现了，比如队伍状态的实现比较有趣-可以稍微留意一下"><a href="#功能大概实现了，比如队伍状态的实现比较有趣-可以稍微留意一下" class="headerlink" title="功能大概实现了，比如队伍状态的实现比较有趣,可以稍微留意一下"></a>功能大概实现了，比如队伍状态的实现比较有趣,可以稍微留意一下</h5></li>
</ul>
<h2 id="阶段性问题-4"><a href="#阶段性问题-4" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="这里解决了之前提到的问题：用户加入和创建队伍还显示不正常，这不是浏览器问题"><a href="#这里解决了之前提到的问题：用户加入和创建队伍还显示不正常，这不是浏览器问题" class="headerlink" title="这里解决了之前提到的问题：用户加入和创建队伍还显示不正常，这不是浏览器问题"></a>这里解决了之前提到的问题：用户加入和创建队伍还显示不正常，这不是浏览器问题</h5></li>
<li><h5 id="这是因为我删除了队伍team，却没有删除user-team对应记录，查询teamList时查到的队伍出现null值，前端渲染就出现了错误"><a href="#这是因为我删除了队伍team，却没有删除user-team对应记录，查询teamList时查到的队伍出现null值，前端渲染就出现了错误" class="headerlink" title="这是因为我删除了队伍team，却没有删除user_team对应记录，查询teamList时查到的队伍出现null值，前端渲染就出现了错误"></a>这是因为我删除了队伍team，却没有删除user_team对应记录，查询teamList时查到的队伍出现null值，前端渲染就出现了错误</h5></li>
<li><h5 id="还有teamUpdatePage-vue显示不正常，修改了下文件名为teamEditPage-vue就可以显示了，这浏览器真几把无语"><a href="#还有teamUpdatePage-vue显示不正常，修改了下文件名为teamEditPage-vue就可以显示了，这浏览器真几把无语" class="headerlink" title="还有teamUpdatePage.vue显示不正常，修改了下文件名为teamEditPage.vue就可以显示了，这浏览器真几把无语"></a>还有teamUpdatePage.vue显示不正常，修改了下文件名为teamEditPage.vue就可以显示了，这浏览器真几把无语</h5></li>
<li><h5 id="整理了下数据库，删除了一些脏数据；整理了下队伍页面，都放进pages-team下了，修改包注意同步修改路由和对其他页面引用"><a href="#整理了下数据库，删除了一些脏数据；整理了下队伍页面，都放进pages-team下了，修改包注意同步修改路由和对其他页面引用" class="headerlink" title="整理了下数据库，删除了一些脏数据；整理了下队伍页面，都放进pages/team下了，修改包注意同步修改路由和对其他页面引用"></a>整理了下数据库，删除了一些脏数据；整理了下队伍页面，都放进pages/team下了，修改包注意同步修改路由和对其他页面引用</h5></li>
</ul>
<h2 id="思考-1"><a href="#思考-1" class="headerlink" title="思考"></a>思考</h2><ul>
<li><h5 id="这里又明确了下前端axios请求接收到的的响应值response：首先axios封装了response，我们从后台传回的数据都封装在response-data下，这一点毋庸置疑。全局响应拦截器帮我们做了这一点，所以我们使用myAxios发送请求，响应值就是被封装好的response-data了，即后端封装的BaseResponse对象（code、data、message、description）-理清这一点后，之后处理响应值的思路就很清晰了"><a href="#这里又明确了下前端axios请求接收到的的响应值response：首先axios封装了response，我们从后台传回的数据都封装在response-data下，这一点毋庸置疑。全局响应拦截器帮我们做了这一点，所以我们使用myAxios发送请求，响应值就是被封装好的response-data了，即后端封装的BaseResponse对象（code、data、message、description）-理清这一点后，之后处理响应值的思路就很清晰了" class="headerlink" title="这里又明确了下前端axios请求接收到的的响应值response：首先axios封装了response，我们从后台传回的数据都封装在response.data下，这一点毋庸置疑。全局响应拦截器帮我们做了这一点，所以我们使用myAxios发送请求，响应值就是被封装好的response.data了，即后端封装的BaseResponse对象（code、data、message、description）,理清这一点后，之后处理响应值的思路就很清晰了"></a>这里又明确了下前端axios请求接收到的的响应值response：首先axios封装了response，我们从后台传回的数据都封装在response.data下，这一点毋庸置疑。全局响应拦截器帮我们做了这一点，所以我们使用myAxios发送请求，响应值就是被封装好的response.data了，即后端封装的BaseResponse对象（code、data、message、description）,理清这一点后，之后处理响应值的思路就很清晰了</h5></li>
</ul>
<h3 id="退出队伍"><a href="#退出队伍" class="headerlink" title="退出队伍"></a>退出队伍</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-button size=&quot;mini&quot; type=&quot;danger&quot; @click=&quot;quitTeam(team)&quot;&gt;退出&lt;/van-button<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 退出队伍</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">quitTeam</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">team: <span class="hljs-built_in">any</span></span>) =&gt; &#123;<br>  <span class="hljs-title function_">showConfirmDialog</span>(&#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;提示&quot;</span>,<br>    <span class="hljs-attr">message</span>: <span class="hljs-string">&quot;你确定要退出队伍吗?&quot;</span>,<br>  &#125;)<br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>      <span class="hljs-comment">// on confirm</span><br>      <span class="hljs-keyword">const</span> quit = <span class="hljs-keyword">await</span> myAxios<br>        .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/quit&quot;</span>, &#123;<br>          <span class="hljs-attr">id</span>: team.<span class="hljs-property">id</span>,<br>          <span class="hljs-attr">userId</span>: team.<span class="hljs-property">userId</span>,<br>          <span class="hljs-attr">joinNum</span>: team.<span class="hljs-property">joinNum</span>,<br>        &#125;)<br>        <span class="hljs-comment">// 响应</span><br>        .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>          <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);<br>          <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>        &#125;)<br>        <span class="hljs-comment">// 抛异常</span><br>        .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>        &#125;);<br><br>      <span class="hljs-keyword">if</span> (quit.<span class="hljs-property">data</span>) &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`<span class="hljs-subst">$&#123;quit.data&#125;</span>`</span>);<br>      &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;退出队伍失败&quot;</span>);<br>      &#125;<br>      <span class="hljs-comment">// 刷新页面</span><br>      location.<span class="hljs-property">reload</span>;<br>    &#125;)<br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>      <span class="hljs-comment">// on cancel</span><br>    &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="注意到这里还使用了Dialog弹出框组件，使用逻辑简单了解一下就行"><a href="#注意到这里还使用了Dialog弹出框组件，使用逻辑简单了解一下就行" class="headerlink" title="注意到这里还使用了Dialog弹出框组件，使用逻辑简单了解一下就行"></a>注意到这里还使用了Dialog弹出框组件，使用逻辑简单了解一下就行</h5></li>
</ul>
<h2 id="阶段性问题-5"><a href="#阶段性问题-5" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="解散队伍逻辑还有问题"><a href="#解散队伍逻辑还有问题" class="headerlink" title="解散队伍逻辑还有问题"></a>解散队伍逻辑还有问题</h5></li>
<li><h5 id="引发新问题：当已创建队伍-已加入队伍为空时，后端不应该抛出业务异常，需优化前后端逻辑"><a href="#引发新问题：当已创建队伍-已加入队伍为空时，后端不应该抛出业务异常，需优化前后端逻辑" class="headerlink" title="引发新问题：当已创建队伍/已加入队伍为空时，后端不应该抛出业务异常，需优化前后端逻辑"></a>引发新问题：当已创建队伍/已加入队伍为空时，后端不应该抛出业务异常，需优化前后端逻辑</h5></li>
</ul>
<h3 id="优化后端逻辑"><a href="#优化后端逻辑" class="headerlink" title="优化后端逻辑"></a>优化后端逻辑</h3><ul>
<li><h5 id="getCreatedTeam返回为空，将返回的team置为null"><a href="#getCreatedTeam返回为空，将返回的team置为null" class="headerlink" title="getCreatedTeam返回为空，将返回的team置为null"></a>getCreatedTeam返回为空，将返回的team置为null</h5></li>
</ul>
<figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs reasonml"><span class="hljs-comment">// TODO 创建队伍数为空</span><br><span class="hljs-keyword">if</span> (<span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">CollectionUtils</span>.</span></span>is<span class="hljs-constructor">Empty(<span class="hljs-params">teamList</span>)</span>) &#123;<br>	teamList = null;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="getJoinedTeam返回为空，将返回的team置为null"><a href="#getJoinedTeam返回为空，将返回的team置为null" class="headerlink" title="getJoinedTeam返回为空，将返回的team置为null"></a>getJoinedTeam返回为空，将返回的team置为null</h5></li>
</ul>
<figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs arcade"><span class="hljs-comment">// TODO 加入队伍数为空</span><br><span class="hljs-keyword">if</span> (CollectionUtils.<span class="hljs-built_in">isEmpty</span>(userTeamList)) &#123;<br>	<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="优化前端逻辑"><a href="#优化前端逻辑" class="headerlink" title="优化前端逻辑"></a>优化前端逻辑</h3><ul>
<li><h5 id="前端处理队伍状态逻辑不应该将createdTeam和joinedTeam耦合，分开校验（这里也为解散队伍功能埋下了祸根，之后我们会解决这个问题）"><a href="#前端处理队伍状态逻辑不应该将createdTeam和joinedTeam耦合，分开校验（这里也为解散队伍功能埋下了祸根，之后我们会解决这个问题）" class="headerlink" title="前端处理队伍状态逻辑不应该将createdTeam和joinedTeam耦合，分开校验（这里也为解散队伍功能埋下了祸根，之后我们会解决这个问题）"></a>前端处理队伍状态逻辑不应该将createdTeam和joinedTeam耦合，分开校验（这里也为解散队伍功能埋下了祸根，之后我们会解决这个问题）</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 处理已创建队伍状态</span><br><span class="hljs-keyword">if</span> (teamList1) &#123;<br>  teamList1.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">team: teamType</span>) =&gt;</span> &#123;<br>    <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;0&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;公开&quot;</span>;<br>    <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;1&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;私有&quot;</span>;<br>    <span class="hljs-keyword">else</span> team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;加密&quot;</span>;<br>  &#125;);<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 处理已加入队伍状态</span><br> <span class="hljs-keyword">if</span> (teamList2) &#123;<br>   teamList2.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">team: teamType</span>) =&gt;</span> &#123;<br>     <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;0&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;公开&quot;</span>;<br>     <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;1&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;私有&quot;</span>;<br>     <span class="hljs-keyword">else</span> team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;加密&quot;</span>;<br>   &#125;);<br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="优化队伍展示逻辑，如果createdTeam-joinedTeam为空则展示为空组件（这一点我们在之前也做过）"><a href="#优化队伍展示逻辑，如果createdTeam-joinedTeam为空则展示为空组件（这一点我们在之前也做过）" class="headerlink" title="优化队伍展示逻辑，如果createdTeam/joinedTeam为空则展示为空组件（这一点我们在之前也做过）"></a>优化队伍展示逻辑，如果createdTeam/joinedTeam为空则展示为空组件（这一点我们在之前也做过）</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-divider content-position=&quot;left&quot;&gt;我创建的队伍&lt;/van-divider&gt; <br>&lt;van-card<br>     v-if=&quot;teamCreated&quot;<br>     v-for=&quot;team in teamCreated&quot;<br>     :tag=&quot;team.status&quot;<br>     :title=&quot;team.name&quot;<br>     :desc=&quot;team.description&quot;<br>     thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>   &gt;<br>     &lt;template #bottom&gt;<br>       &lt;div&gt;队伍人数: &#123;&#123; team.joinNum &#125;&#125;/ &#123;&#123; team.maxNum &#125;&#125;&lt;/div&gt;<br>       &lt;div&gt;创建时间: &#123;&#123; team.createTime &#125;&#125;&lt;/div&gt;<br>       &lt;div&gt;解散时间: &#123;&#123; team.expireTime &#125;&#125;&lt;/div&gt;<br>     &lt;/template&gt;<br><br>     &lt;template #footer&gt;<br>       &lt;van-button size=&quot;mini&quot; type=&quot;primary&quot; @click=&quot;toEditTeam(team.id)&quot;&gt;<br>         修改<br>       &lt;/van-button&gt;<br>       &lt;van-button size=&quot;mini&quot; type=&quot;danger&quot; @click=&quot;deleteTeam(team)&quot;<br>         &gt;解散&lt;/van-button<br>       &gt;<br>     &lt;/template&gt;<br>   &lt;/van-card&gt;<br>   &lt;!-- 已创建队伍信息展示 --&gt;<br>   &lt;van-empty v-if=&quot;!teamCreated&quot; description=&quot;创建队伍为空&quot; /&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-divider content-position=&quot;right&quot;&gt;我加入的队伍&lt;/van-divider&gt;<br>    &lt;van-card<br>      v-if=&quot;teamJoined&quot;<br>      v-for=&quot;team in teamJoined&quot;<br>      :tag=&quot;team.status&quot;<br>      :title=&quot;team.name&quot;<br>      :desc=&quot;team.description&quot;<br>      thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>    &gt;<br>      &lt;template #bottom&gt;<br>        &lt;div&gt;队伍人数: &#123;&#123; team.joinNum &#125;&#125;/ &#123;&#123; team.maxNum &#125;&#125;&lt;/div&gt;<br>        &lt;div&gt;创建时间: &#123;&#123; team.createTime &#125;&#125;&lt;/div&gt;<br>        &lt;div&gt;解散时间: &#123;&#123; team.expireTime &#125;&#125;&lt;/div&gt;<br>      &lt;/template&gt;<br><br>      &lt;template #footer&gt;<br>        &lt;van-button size=&quot;mini&quot; type=&quot;success&quot;&gt;进群聊天&lt;/van-button&gt;<br>        &lt;van-button size=&quot;mini&quot; type=&quot;danger&quot; @click=&quot;quitTeam(team)&quot;<br>          &gt;退出&lt;/van-button<br>        &gt;<br>      &lt;/template&gt;<br>    &lt;/van-card&gt;<br><br>    &lt;!-- 无用户信息展示 --&gt;<br>    &lt;van-empty v-if=&quot;!teamJoined&quot; description=&quot;加入队伍为空&quot; /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里我才发现，之前把getCreatedTeam和getJoinedTeam的响应值赋值错了，导致俩表单展示相反了，我说怎么看起来那么奇怪"><a href="#这里我才发现，之前把getCreatedTeam和getJoinedTeam的响应值赋值错了，导致俩表单展示相反了，我说怎么看起来那么奇怪" class="headerlink" title="这里我才发现，之前把getCreatedTeam和getJoinedTeam的响应值赋值错了，导致俩表单展示相反了，我说怎么看起来那么奇怪"></a>这里我才发现，之前把getCreatedTeam和getJoinedTeam的响应值赋值错了，导致俩表单展示相反了，我说怎么看起来那么奇怪</h5></li>
<li><h5 id="正确的赋值："><a href="#正确的赋值：" class="headerlink" title="正确的赋值："></a>正确的赋值：</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 拿到数据</span><br>teamCreated.<span class="hljs-property">value</span> = teamList1;<br>teamJoined.<span class="hljs-property">value</span> = teamList2;<br></code></pre></td></tr></table></figure>

<h2 id="阶段性问题-6"><a href="#阶段性问题-6" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="解散队伍逻辑实现不了"><a href="#解散队伍逻辑实现不了" class="headerlink" title="解散队伍逻辑实现不了"></a>解散队伍逻辑实现不了</h5></li>
<li><h5 id="就是前面提到的问题，队伍页面展示时team-status被硬修改了（0-“公开”，1-“私密”，2-“加密”），而在解散队伍的逻辑当中，需要获取队伍的status，导致请求参数错误。解决办法就是不要直接修改team的status，另找个变量。"><a href="#就是前面提到的问题，队伍页面展示时team-status被硬修改了（0-“公开”，1-“私密”，2-“加密”），而在解散队伍的逻辑当中，需要获取队伍的status，导致请求参数错误。解决办法就是不要直接修改team的status，另找个变量。" class="headerlink" title="就是前面提到的问题，队伍页面展示时team.status被硬修改了（0-“公开”，1-“私密”，2-“加密”），而在解散队伍的逻辑当中，需要获取队伍的status，导致请求参数错误。解决办法就是不要直接修改team的status，另找个变量。"></a>就是前面提到的问题，队伍页面展示时team.status被硬修改了（0-“公开”，1-“私密”，2-“加密”），而在解散队伍的逻辑当中，需要获取队伍的status，导致请求参数错误。解决办法就是不要直接修改team的status，另找个变量。</h5></li>
<li><h5 id="现在这个问题解决了，改动挺多，听我娓娓道来"><a href="#现在这个问题解决了，改动挺多，听我娓娓道来" class="headerlink" title="现在这个问题解决了，改动挺多，听我娓娓道来~"></a>现在这个问题解决了，改动挺多，听我娓娓道来~</h5></li>
<li><h5 id="这里另找个变量status不好实现，得遍历到所有team，得到的每个team对象中新增变量保存status修改后的状态。（设想这样是挺复杂的，可以实现，但感觉完全没必要）"><a href="#这里另找个变量status不好实现，得遍历到所有team，得到的每个team对象中新增变量保存status修改后的状态。（设想这样是挺复杂的，可以实现，但感觉完全没必要）" class="headerlink" title="这里另找个变量status不好实现，得遍历到所有team，得到的每个team对象中新增变量保存status修改后的状态。（设想这样是挺复杂的，可以实现，但感觉完全没必要）"></a>这里另找个变量status不好实现，得遍历到所有team，得到的每个team对象中新增变量保存status修改后的状态。（设想这样是挺复杂的，可以实现，但感觉完全没必要）</h5></li>
<li><h5 id="另一个思路很直接，不变team-status，表单在作展示时可以调用一个函数，按（0-“公开”，1-“私密”，2-“加密”）转换显示"><a href="#另一个思路很直接，不变team-status，表单在作展示时可以调用一个函数，按（0-“公开”，1-“私密”，2-“加密”）转换显示" class="headerlink" title="另一个思路很直接，不变team.status，表单在作展示时可以调用一个函数，按（0-“公开”，1-“私密”，2-“加密”）转换显示"></a>另一个思路很直接，不变team.status，表单在作展示时可以调用一个函数，按（0-“公开”，1-“私密”，2-“加密”）转换显示</h5></li>
<li><h5 id="那我们就在service-function-getStatus-ts下实现一个函数，负责转换status"><a href="#那我们就在service-function-getStatus-ts下实现一个函数，负责转换status" class="headerlink" title="那我们就在service/function\getStatus.ts下实现一个函数，负责转换status"></a>那我们就在service/function\getStatus.ts下实现一个函数，负责转换status</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 转换stasus</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">getStatus</span> = (<span class="hljs-params">status: <span class="hljs-built_in">number</span></span>) =&gt; &#123;<br>  <span class="hljs-keyword">if</span> (status === <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;公开&quot;</span>;<br>  <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (status === <span class="hljs-number">1</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;私密&quot;</span>;<br>  <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;加密&quot;</span>;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="tag标签下绑定这个函数就行"><a href="#tag标签下绑定这个函数就行" class="headerlink" title="tag标签下绑定这个函数就行"></a>tag标签下绑定这个函数就行</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-card<br>      v-if=&quot;teamCreated&quot;<br>      v-for=&quot;team in teamCreated&quot;<br>      :tag=&quot;getStatus(team.status)&quot;<br>      :title=&quot;team.name&quot;<br>      :desc=&quot;team.description&quot;<br>      thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>    &gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="那我们之前的处理status就不需要了，直接删除↓"><a href="#那我们之前的处理status就不需要了，直接删除↓" class="headerlink" title="那我们之前的处理status就不需要了，直接删除↓"></a>那我们之前的处理status就不需要了，直接删除↓</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 处理已创建队伍状态</span><br><span class="hljs-keyword">if</span> (teamList1) &#123;<br>  teamList1.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">team: teamType</span>) =&gt;</span> &#123;<br>    <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;0&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;公开&quot;</span>;<br>    <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;1&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;私有&quot;</span>;<br>    <span class="hljs-keyword">else</span> team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;加密&quot;</span>;<br>  &#125;);<br>&#125;<br><span class="hljs-comment">// 处理已加入队伍状态</span><br><span class="hljs-keyword">if</span> (teamList2) &#123;<br>  teamList2.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">team: teamType</span>) =&gt;</span> &#123;<br>    <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;0&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;公开&quot;</span>;<br>    <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (team.<span class="hljs-property">status</span> == <span class="hljs-string">&quot;1&quot;</span>) team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;私有&quot;</span>;<br>    <span class="hljs-keyword">else</span> team.<span class="hljs-property">status</span> = <span class="hljs-string">&quot;加密&quot;</span>;<br>  &#125;);<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="那解散队伍就好操作了："><a href="#那解散队伍就好操作了：" class="headerlink" title="那解散队伍就好操作了："></a>那解散队伍就好操作了：</h5></li>
</ul>
<h3 id="解散队伍"><a href="#解散队伍" class="headerlink" title="解散队伍"></a>解散队伍</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-button size=&quot;mini&quot; type=&quot;danger&quot; @click=&quot;deleteTeam(team)&quot;&gt;解散&lt;/van-button<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 解散队伍</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">deleteTeam</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">team: <span class="hljs-built_in">any</span></span>) =&gt; &#123;<br>  <span class="hljs-title function_">showConfirmDialog</span>(&#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;提示&quot;</span>,<br>    <span class="hljs-attr">message</span>: <span class="hljs-string">&quot;你确定要解散队伍吗?&quot;</span>,<br>  &#125;)<br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>      <span class="hljs-comment">// on confirm</span><br>      <span class="hljs-keyword">const</span> del = <span class="hljs-keyword">await</span> myAxios<br>        .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/delete&quot;</span>, &#123;<br>          <span class="hljs-attr">id</span>: team.<span class="hljs-property">id</span>,<br>          <span class="hljs-attr">userId</span>: team.<span class="hljs-property">userId</span>,<br>          <span class="hljs-attr">status</span>: team.<span class="hljs-property">status</span>,<br>          <span class="hljs-attr">password</span>: team.<span class="hljs-property">password</span>,<br>        &#125;)<br>        <span class="hljs-comment">// 响应</span><br>        .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>          <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);<br>          <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>        &#125;)<br>        <span class="hljs-comment">// 抛异常</span><br>        .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>        &#125;);<br><br>      <span class="hljs-keyword">if</span> (del.<span class="hljs-property">data</span>) &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`<span class="hljs-subst">$&#123;del.data&#125;</span>`</span>);<br>      &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;解散队伍失败&quot;</span>);<br>      &#125;<br>      <span class="hljs-comment">// 刷新页面</span><br>      location.<span class="hljs-property">reload</span>;<br>    &#125;)<br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>      <span class="hljs-comment">// on cancel</span><br>    &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<h2 id="阶段性问题-7"><a href="#阶段性问题-7" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="这里要留心，由于后端使用-requestBody接收参数，所以退出-解散队伍发送的json字符串一定要和后端对应"><a href="#这里要留心，由于后端使用-requestBody接收参数，所以退出-解散队伍发送的json字符串一定要和后端对应" class="headerlink" title="这里要留心，由于后端使用@requestBody接收参数，所以退出/解散队伍发送的json字符串一定要和后端对应"></a>这里要留心，由于后端使用@requestBody接收参数，所以退出/解散队伍发送的json字符串一定要和后端对应</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 退出队伍</span><br><span class="hljs-keyword">const</span> quit = <span class="hljs-keyword">await</span> myAxios<br>      .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/quit&quot;</span>, &#123;<br>        <span class="hljs-attr">id</span>: team.<span class="hljs-property">id</span>,<br>        <span class="hljs-attr">userId</span>: team.<span class="hljs-property">userId</span>,<br>        <span class="hljs-attr">joinNum</span>: team.<span class="hljs-property">joinNum</span>,<br>      &#125;)<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 解散队伍</span><br><span class="hljs-keyword">const</span> del = <span class="hljs-keyword">await</span> myAxios<br>       .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/delete&quot;</span>, &#123;<br>         <span class="hljs-attr">id</span>: team.<span class="hljs-property">id</span>,<br>         <span class="hljs-attr">userId</span>: team.<span class="hljs-property">userId</span>,<br>         <span class="hljs-attr">status</span>: team.<span class="hljs-property">status</span>,<br>         <span class="hljs-attr">password</span>: team.<span class="hljs-property">password</span>,<br>       &#125;)<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="还要注意这两个操作的后端逻辑校验，那就是："><a href="#还要注意这两个操作的后端逻辑校验，那就是：" class="headerlink" title="还要注意这两个操作的后端逻辑校验，那就是："></a>还要注意这两个操作的后端逻辑校验，那就是：</h5></li>
<li><h5 id="退出队伍时，如果只剩最后一人，要解散队伍和队长直接解散队伍，一定要同时清楚team和user-team中的记录，这样不仅影响业务逻辑，还会在脏数据多的时候，前端队伍显示不正常，这问题你找都找不到"><a href="#退出队伍时，如果只剩最后一人，要解散队伍和队长直接解散队伍，一定要同时清楚team和user-team中的记录，这样不仅影响业务逻辑，还会在脏数据多的时候，前端队伍显示不正常，这问题你找都找不到" class="headerlink" title="退出队伍时，如果只剩最后一人，要解散队伍和队长直接解散队伍，一定要同时清楚team和user_team中的记录，这样不仅影响业务逻辑，还会在脏数据多的时候，前端队伍显示不正常，这问题你找都找不到"></a>退出队伍时，如果只剩最后一人，要解散队伍和队长直接解散队伍，一定要同时清楚team和user_team中的记录，这样不仅影响业务逻辑，还会在脏数据多的时候，前端队伍显示不正常，这问题你找都找不到</h5></li>
<li><h5 id="哎我真几把服了，还以为teamList1和teamList2没用了，把赋值语句删了。搞得队伍表单连数据都没有，怪不得突然就不显示队伍了"><a href="#哎我真几把服了，还以为teamList1和teamList2没用了，把赋值语句删了。搞得队伍表单连数据都没有，怪不得突然就不显示队伍了" class="headerlink" title="哎我真几把服了，还以为teamList1和teamList2没用了，把赋值语句删了。搞得队伍表单连数据都没有，怪不得突然就不显示队伍了"></a>哎我真几把服了，还以为teamList1和teamList2没用了，把赋值语句删了。搞得队伍表单连数据都没有，怪不得突然就不显示队伍了</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 拿到数据</span><br>teamCreated.<span class="hljs-property">value</span> = teamList1;<br>teamJoined.<span class="hljs-property">value</span> = teamList2;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;teamJoin =&gt; &quot;</span> + teamJoined.<span class="hljs-property">value</span>);<br></code></pre></td></tr></table></figure>

<h2 id="思考-2"><a href="#思考-2" class="headerlink" title="思考"></a>思考</h2><ul>
<li><h5 id="疯狂整理了下该文档的目录格式（2023-05-13晚）"><a href="#疯狂整理了下该文档的目录格式（2023-05-13晚）" class="headerlink" title="疯狂整理了下该文档的目录格式（2023/05/13晚）"></a>疯狂整理了下该文档的目录格式（2023/05/13晚）</h5></li>
<li><h5 id="每天完成一个小功能真的很快乐"><a href="#每天完成一个小功能真的很快乐" class="headerlink" title="每天完成一个小功能真的很快乐"></a>每天完成一个小功能真的很快乐</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 1.删除team记录</span><br>     <span class="hljs-type">boolean</span> <span class="hljs-variable">teamRemove</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.removeById(teamId);<br>     <span class="hljs-keyword">if</span> (!teamRemove)<br>         <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br> <span class="hljs-comment">// 2.删除user_team记录</span><br>     QueryWrapper&lt;UserTeam&gt; uqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>     uqw.eq(<span class="hljs-string">&quot;team_id&quot;</span>, teamId);<br>     <span class="hljs-type">boolean</span> <span class="hljs-variable">userTeamRemove</span> <span class="hljs-operator">=</span> userTeamService.remove(uqw);<br>     <span class="hljs-keyword">if</span> (!userTeamRemove)<br>         <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="哦我操他奶奶的，做个数据库实验不小心把数据库删了，他妈的。。。（2023-05-12晚）"><a href="#哦我操他奶奶的，做个数据库实验不小心把数据库删了，他妈的。。。（2023-05-12晚）" class="headerlink" title="哦我操他奶奶的，做个数据库实验不小心把数据库删了，他妈的。。。（2023/05/12晚）"></a>哦我操他奶奶的，做个数据库实验不小心把数据库删了，他妈的。。。（2023/05/12晚）</h5></li>
<li><h5 id="补充一点-做测试的时候-记得加上这样一条"><a href="#补充一点-做测试的时候-记得加上这样一条" class="headerlink" title="补充一点: 做测试的时候, 记得加上这样一条:"></a>补充一点: 做测试的时候, 记得加上这样一条:</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@SpringBootTest(classes = UserCenterApplication.class)</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="数据基本恢复完成！之前的同步工作做的不够好，建个表不是少tags就是缺profile，小问题"><a href="#数据基本恢复完成！之前的同步工作做的不够好，建个表不是少tags就是缺profile，小问题" class="headerlink" title="数据基本恢复完成！之前的同步工作做的不够好，建个表不是少tags就是缺profile，小问题"></a>数据基本恢复完成！之前的同步工作做的不够好，建个表不是少tags就是缺profile，小问题</h5></li>
<li><h5 id="顺便优化了join-num字段，默认为1，新增队伍时已加人数就默认置为1了"><a href="#顺便优化了join-num字段，默认为1，新增队伍时已加人数就默认置为1了" class="headerlink" title="顺便优化了join_num字段，默认为1，新增队伍时已加人数就默认置为1了"></a>顺便优化了join_num字段，默认为1，新增队伍时已加人数就默认置为1了</h5></li>
<li><h5 id="当然了，有了数据才解决了上面的解散队伍的问题"><a href="#当然了，有了数据才解决了上面的解散队伍的问题" class="headerlink" title="当然了，有了数据才解决了上面的解散队伍的问题"></a>当然了，有了数据才解决了上面的解散队伍的问题</h5></li>
<li><h5 id="浅浅记录一下效果吧："><a href="#浅浅记录一下效果吧：" class="headerlink" title="浅浅记录一下效果吧："></a>浅浅记录一下效果吧：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230520133756831.png" alt="image-20230520133756831"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230520133811546.png" alt="image-20230520133811546"></p>
<h2 id="浅浅记录"><a href="#浅浅记录" class="headerlink" title="浅浅记录"></a>浅浅记录</h2><ul>
<li><h5 id="想起来了，上次推送blog老是更新不成功，不知道这机子吃错药了还是，现在就没问题了"><a href="#想起来了，上次推送blog老是更新不成功，不知道这机子吃错药了还是，现在就没问题了" class="headerlink" title="想起来了，上次推送blog老是更新不成功，不知道这机子吃错药了还是，现在就没问题了"></a>想起来了，上次推送blog老是更新不成功，不知道这机子吃错药了还是，现在就没问题了</h5></li>
<li><h5 id="好几天没有更新内容了，这几天都去做毛概PPT和性交视频剪辑了，基本没精力完善这个（2023-05-18早）"><a href="#好几天没有更新内容了，这几天都去做毛概PPT和性交视频剪辑了，基本没精力完善这个（2023-05-18早）" class="headerlink" title="好几天没有更新内容了，这几天都去做毛概PPT和性交视频剪辑了，基本没精力完善这个（2023/05/18早）"></a>好几天没有更新内容了，这几天都去做毛概PPT和性交视频剪辑了，基本没精力完善这个（2023/05/18早）</h5></li>
<li><h5 id="今天就完成搜索队伍功能吧"><a href="#今天就完成搜索队伍功能吧" class="headerlink" title="今天就完成搜索队伍功能吧"></a>今天就完成搜索队伍功能吧</h5></li>
</ul>
<h3 id="搜索队伍"><a href="#搜索队伍" class="headerlink" title="搜索队伍"></a>搜索队伍</h3><ul>
<li><h5 id="今天升到win11系统了，新界面还挺不适应的"><a href="#今天升到win11系统了，新界面还挺不适应的" class="headerlink" title="今天升到win11系统了，新界面还挺不适应的"></a>今天升到win11系统了，新界面还挺不适应的</h5></li>
<li><h5 id="先完成一个小功能，给index-vue页面加一个返回顶部的功能，就是用了一个小组件"><a href="#先完成一个小功能，给index-vue页面加一个返回顶部的功能，就是用了一个小组件" class="headerlink" title="先完成一个小功能，给index.vue页面加一个返回顶部的功能，就是用了一个小组件"></a>先完成一个小功能，给index.vue页面加一个返回顶部的功能，就是用了一个小组件</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-back-top /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="PPT制作完成，视频剪辑完成，可以安心搞Java了-2023-05-20黄昏"><a href="#PPT制作完成，视频剪辑完成，可以安心搞Java了-2023-05-20黄昏" class="headerlink" title="PPT制作完成，视频剪辑完成，可以安心搞Java了 (2023/05/20黄昏)"></a>PPT制作完成，视频剪辑完成，可以安心搞Java了 (2023/05/20黄昏)</h5></li>
<li><h5 id="快速记录一下开发情况吧"><a href="#快速记录一下开发情况吧" class="headerlink" title="快速记录一下开发情况吧:"></a>快速记录一下开发情况吧:</h5></li>
<li><h5 id="页面开发"><a href="#页面开发" class="headerlink" title="页面开发"></a>页面开发</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;van-form @submit=&quot;onSearchTeam&quot;&gt;<br>    &lt;van-cell-group inset&gt;<br>      &lt;van-field<br>        v-model=&quot;searchItem.name&quot;<br>        name=&quot;name&quot;<br>        label=&quot;队伍名&quot;<br>        placeholder=&quot;请输入队伍名&quot;<br>        :rules=&quot;[&#123; message: &#x27;请输入队伍名&#x27; &#125;]&quot;<br>      /&gt;<br><br>      &lt;van-field<br>        v-model=&quot;searchItem.description&quot;<br>        rows=&quot;4&quot;<br>        name=&quot;description&quot;<br>        label=&quot;队伍描述&quot;<br>        type=&quot;textarea&quot;<br>        placeholder=&quot;请输入队伍描述&quot;<br>      /&gt;<br><br>      &lt;van-field<br>        v-model=&quot;searchItem.userId&quot;<br>        name=&quot;userId&quot;<br>        label=&quot;队长id&quot;<br>        placeholder=&quot;请输入队长id&quot;<br>        :rules=&quot;[&#123; message: &#x27;请输入队长id&#x27; &#125;]&quot;<br>      /&gt;<br><br>      &lt;van-field name=&quot;maxNum&quot; label=&quot;最少人数&quot;&gt;<br>        &lt;template #input&gt;<br>          &lt;van-stepper v-model=&quot;searchItem.maxNum&quot; max=&quot;20&quot; min=&quot;2&quot; /&gt;<br>        &lt;/template&gt;<br>      &lt;/van-field&gt;<br><br>      &lt;van-field name=&quot;radio&quot; label=&quot;队伍状态&quot;&gt;<br>        &lt;template #input&gt;<br>          &lt;van-radio-group v-model=&quot;searchItem.status&quot; direction=&quot;horizontal&quot;&gt;<br>            &lt;van-radio name=&quot;0&quot;&gt;公开&lt;/van-radio&gt;<br>            &lt;van-radio name=&quot;1&quot;&gt;私有&lt;/van-radio&gt;<br>            &lt;van-radio name=&quot;2&quot;&gt;加密&lt;/van-radio&gt;<br>          &lt;/van-radio-group&gt;<br>        &lt;/template&gt;<br>      &lt;/van-field&gt;<br>    &lt;/van-cell-group&gt;<br><br>    &lt;div style=&quot;margin: 16px&quot;&gt;<br>      &lt;van-button round block type=&quot;primary&quot; native-type=&quot;submit&quot;&gt;<br>        提交<br>      &lt;/van-button&gt;<br>    &lt;/div&gt;<br>  &lt;/van-form&gt;<br><br>  &lt;van-divider content-position=&quot;left&quot;&gt;符合条件的队伍&lt;/van-divider&gt;<br>  &lt;van-card<br>    v-if=&quot;teamList&quot;<br>    v-for=&quot;team in teamList&quot;<br>    :tag=&quot;getStatus(team.status)&quot;<br>    :title=&quot;team.name&quot;<br>    :desc=&quot;team.description&quot;<br>    thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>  &gt;<br>    &lt;template #bottom&gt;<br>      &lt;div&gt;队伍人数: &#123;&#123; team.joinNum &#125;&#125;/ &#123;&#123; team.maxNum &#125;&#125;&lt;/div&gt;<br>      &lt;div&gt;创建时间: &#123;&#123; team.createTime &#125;&#125;&lt;/div&gt;<br>      &lt;div&gt;解散时间: &#123;&#123; team.expireTime &#125;&#125;&lt;/div&gt;<br>    &lt;/template&gt;<br><br>    &lt;template #footer&gt;<br>      &lt;van-button size=&quot;mini&quot; type=&quot;primary&quot; @click=&quot;&quot;&gt; 详细信息 &lt;/van-button&gt;<br>    &lt;/template&gt;<br>  &lt;/van-card&gt;<br>  &lt;!-- 无用户信息展示 --&gt;<br>  &lt;van-empty v-if=&quot;!teamList&quot; description=&quot;加入队伍为空&quot; /&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script lang=<span class="hljs-string">&quot;ts&quot;</span> setup&gt;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; getStatus &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../../service/function/getStatus&quot;</span>;<br><br><span class="hljs-keyword">const</span> initItem = &#123;<br>  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">description</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">maxNum</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">userId</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">status</span>: <span class="hljs-string">&quot;&quot;</span>,<br>&#125;;<br><span class="hljs-comment">// 搜索条件</span><br><span class="hljs-keyword">const</span> searchItem = <span class="hljs-title function_">ref</span>(&#123; ...initItem &#125;);<br><span class="hljs-comment">// 队伍列表</span><br><span class="hljs-keyword">const</span> teamList = <span class="hljs-title function_">ref</span>([]);<br><span class="hljs-comment">// 表单项</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onSearchTeam</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/list/page&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">name</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">name</span>,<br>        <span class="hljs-attr">description</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">description</span>,<br>        <span class="hljs-attr">maxNum</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">maxNum</span>,<br>        <span class="hljs-attr">userId</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">userId</span>,<br>        <span class="hljs-attr">status</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">status</span>,<br>      &#125;,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-keyword">return</span> response?.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br>  <span class="hljs-comment">// 拿取队伍列表</span><br>  teamList.<span class="hljs-property">value</span> = res;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(teamList.<span class="hljs-property">value</span>);<br>&#125;;<br>&lt;/script&gt;<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="后端接口优化"><a href="#后端接口优化" class="headerlink" title="后端接口优化"></a>后端接口优化</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 查询队伍(分页查询)</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> team 查询参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 符合条件的队伍</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Transactional</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> Page&lt;Team&gt; <span class="hljs-title function_">teamList</span><span class="hljs-params">(TeamQuery team, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// 登录校验</span><br>        <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>        <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>        QueryWrapper&lt;Team&gt; tqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br><br>        <span class="hljs-comment">// 1.根据队伍名查询</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">name</span> <span class="hljs-operator">=</span> team.getName();<br>        <span class="hljs-keyword">if</span> (StringUtils.isNotEmpty(name) &amp;&amp; name.length() &lt; <span class="hljs-number">20</span>)<br>            tqw.like(<span class="hljs-string">&quot;name&quot;</span>, name);<br><br>        <span class="hljs-comment">// 2.根据队伍描述查询</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">description</span> <span class="hljs-operator">=</span> team.getDescription();<br>        <span class="hljs-keyword">if</span> (StringUtils.isNotEmpty(description) &amp;&amp; description.length() &gt; <span class="hljs-number">512</span>)<br>            tqw.like(<span class="hljs-string">&quot;description&quot;</span>, description);<br><br>        <span class="hljs-comment">// 3.根据队长id查询</span><br>        <span class="hljs-type">Long</span> <span class="hljs-variable">userId</span> <span class="hljs-operator">=</span> team.getUserId();<br>        <span class="hljs-keyword">if</span> (userId != <span class="hljs-literal">null</span>)<br>            tqw.eq(<span class="hljs-string">&quot;user_id&quot;</span>, userId);<br><br>        <span class="hljs-comment">// 4.根据最大人数查询</span><br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br>        <span class="hljs-keyword">if</span> (maxNum &gt;= <span class="hljs-number">3</span> &amp;&amp; maxNum &lt;= <span class="hljs-number">20</span>)<br>            tqw.gt(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum).eq(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum);<br><br>        <span class="hljs-comment">// 5.根据队伍状态查询</span><br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">status</span> <span class="hljs-operator">=</span> team.getStatus();<br>        <span class="hljs-type">TeamStatusEnum</span> <span class="hljs-variable">statusEnum</span> <span class="hljs-operator">=</span> TeamStatusEnum.getEnumByValue(status);<br>        <span class="hljs-keyword">if</span> (statusEnum != <span class="hljs-literal">null</span>)<br>            tqw.like(<span class="hljs-string">&quot;status&quot;</span>, status);<br><br>        <span class="hljs-comment">// 6.分页查询</span><br>        Page&lt;Team&gt; teamPage = <span class="hljs-built_in">this</span>.page(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Page</span>&lt;&gt;(<span class="hljs-number">1</span>, <span class="hljs-number">5</span>), tqw);<br>        <span class="hljs-keyword">if</span> (teamPage == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>        <span class="hljs-keyword">return</span> teamPage;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里我们记着要默认初始化查询条件均为空吧"><a href="#这里我们记着要默认初始化查询条件均为空吧" class="headerlink" title="这里我们记着要默认初始化查询条件均为空吧"></a>这里我们记着要默认初始化查询条件均为空吧</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">const</span> initItem = &#123;<br>  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">description</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">maxNum</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">userId</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">status</span>: <span class="hljs-string">&quot;&quot;</span>,<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="最后注意一下maxNum的查询条件是-队伍的最少人数"><a href="#最后注意一下maxNum的查询条件是-队伍的最少人数" class="headerlink" title="最后注意一下maxNum的查询条件是 队伍的最少人数"></a>最后注意一下maxNum的查询条件是 队伍的最少人数</h5></li>
<li><h5 id="ok了-可以根据所选条件来筛选队伍了-就是样式比较丑"><a href="#ok了-可以根据所选条件来筛选队伍了-就是样式比较丑" class="headerlink" title="ok了, 可以根据所选条件来筛选队伍了, 就是样式比较丑"></a>ok了, 可以根据所选条件来筛选队伍了, 就是样式比较丑</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230520160601288.png"></p>
<h2 id="阶段性问题-8"><a href="#阶段性问题-8" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="开发搜索表单页面，就做好两点：搜索条件和搜索结果，把对应数据跟表单绑定好就成"><a href="#开发搜索表单页面，就做好两点：搜索条件和搜索结果，把对应数据跟表单绑定好就成" class="headerlink" title="开发搜索表单页面，就做好两点：搜索条件和搜索结果，把对应数据跟表单绑定好就成"></a>开发搜索表单页面，就做好两点：搜索条件和搜索结果，把对应数据跟表单绑定好就成</h5></li>
<li><h5 id="注意到后端处理请求的业务逻辑需要变动，之前写的不好，要求为：有值且值正确，就去查询数据库"><a href="#注意到后端处理请求的业务逻辑需要变动，之前写的不好，要求为：有值且值正确，就去查询数据库" class="headerlink" title="注意到后端处理请求的业务逻辑需要变动，之前写的不好，要求为：有值且值正确，就去查询数据库"></a>注意到后端处理请求的业务逻辑需要变动，之前写的不好，要求为：有值且值正确，就去查询数据库</h5></li>
<li><h5 id="拿到响应数据后，注意分页查询返回的队伍列表是封装在data下的records中的"><a href="#拿到响应数据后，注意分页查询返回的队伍列表是封装在data下的records中的" class="headerlink" title="拿到响应数据后，注意分页查询返回的队伍列表是封装在data下的records中的"></a>拿到响应数据后，注意分页查询返回的队伍列表是封装在data下的records中的</h5></li>
<li><h5 id="还有一个蛋疼的问题，就是浏览器不自动刷新了，只能重启前端服务才有效果-最后发现是TeamListPage-vue的路由里把Team小写了，服务启动没问题，但修改就有问题了，无语了"><a href="#还有一个蛋疼的问题，就是浏览器不自动刷新了，只能重启前端服务才有效果-最后发现是TeamListPage-vue的路由里把Team小写了，服务启动没问题，但修改就有问题了，无语了" class="headerlink" title="还有一个蛋疼的问题，就是浏览器不自动刷新了，只能重启前端服务才有效果,最后发现是TeamListPage.vue的路由里把Team小写了，服务启动没问题，但修改就有问题了，无语了"></a>还有一个蛋疼的问题，就是浏览器不自动刷新了，只能重启前端服务才有效果,最后发现是TeamListPage.vue的路由里把Team小写了，服务启动没问题，但修改就有问题了，无语了</h5></li>
</ul>
<h2 id="思考-3"><a href="#思考-3" class="headerlink" title="思考"></a>思考</h2><ul>
<li><h5 id="好的，队伍功能基本开发完毕，那么接下来的开发内容就是优化代码，开发自动推送，界面开发，追加一些小功能"><a href="#好的，队伍功能基本开发完毕，那么接下来的开发内容就是优化代码，开发自动推送，界面开发，追加一些小功能" class="headerlink" title="好的，队伍功能基本开发完毕，那么接下来的开发内容就是优化代码，开发自动推送，界面开发，追加一些小功能"></a>好的，队伍功能基本开发完毕，那么接下来的开发内容就是优化代码，开发自动推送，界面开发，追加一些小功能</h5></li>
</ul>
<h3 id="随机匹配"><a href="#随机匹配" class="headerlink" title="随机匹配"></a>随机匹配</h3><ul>
<li><h5 id="开始搞随机匹配咯"><a href="#开始搞随机匹配咯" class="headerlink" title="开始搞随机匹配咯"></a>开始搞随机匹配咯</h5></li>
<li><h5 id="编辑距离算法详解-https-blog-csdn-net-DBC-121-article-details-104198838"><a href="#编辑距离算法详解-https-blog-csdn-net-DBC-121-article-details-104198838" class="headerlink" title="编辑距离算法详解: https://blog.csdn.net/DBC_121/article/details/104198838"></a>编辑距离算法详解: <a target="_blank" rel="noopener" href="https://blog.csdn.net/DBC_121/article/details/104198838">https://blog.csdn.net/DBC_121/article/details/104198838</a></h5></li>
</ul>
<h2 id="用户匹配"><a href="#用户匹配" class="headerlink" title="用户匹配"></a>用户匹配</h2><ul>
<li><h5 id="那我们二话不说，直接拿取人家的算法做成工具类了"><a href="#那我们二话不说，直接拿取人家的算法做成工具类了" class="headerlink" title="那我们二话不说，直接拿取人家的算法做成工具类了"></a>那我们二话不说，直接拿取人家的算法做成工具类了</h5></li>
<li><h5 id="utils-AlgorithmUtils下"><a href="#utils-AlgorithmUtils下" class="headerlink" title="utils/AlgorithmUtils下"></a>utils/AlgorithmUtils下</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">package</span> com.memory.usercenter.utils;<br><br><span class="hljs-keyword">import</span> java.util.List;<br><span class="hljs-keyword">import</span> java.util.Objects;<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> * 2023/5/20 21:31</span><br><span class="hljs-comment"> * Function:</span><br><span class="hljs-comment"> * Version 1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AlgorithmUtils</span> &#123;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 编辑距离算法（用于计算最相似的两组标签）</span><br><span class="hljs-comment">     * 原理：&lt;a href=&quot;https://blog.csdn.net/DBC_121/article/details/104198838&quot;&gt;...&lt;/a&gt;</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> tagList1 标签1</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> tagList2 标签2</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 操作数</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">int</span> <span class="hljs-title function_">minDistance</span><span class="hljs-params">(List&lt;String&gt; tagList1, List&lt;String&gt; tagList2)</span> &#123;<br>        <span class="hljs-type">int</span> <span class="hljs-variable">n</span> <span class="hljs-operator">=</span> tagList1.size();<br>        <span class="hljs-type">int</span> <span class="hljs-variable">m</span> <span class="hljs-operator">=</span> tagList2.size();<br><br>        <span class="hljs-keyword">if</span> (n * m == <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-keyword">return</span> n + m;<br>        &#125;<br><br>        <span class="hljs-type">int</span>[][] d = <span class="hljs-keyword">new</span> <span class="hljs-title class_">int</span>[n + <span class="hljs-number">1</span>][m + <span class="hljs-number">1</span>];<br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; i &lt; n + <span class="hljs-number">1</span>; i++) &#123;<br>            d[i][<span class="hljs-number">0</span>] = i;<br>        &#125;<br><br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">j</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; j &lt; m + <span class="hljs-number">1</span>; j++) &#123;<br>            d[<span class="hljs-number">0</span>][j] = j;<br>        &#125;<br><br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">1</span>; i &lt; n + <span class="hljs-number">1</span>; i++) &#123;<br>            <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">j</span> <span class="hljs-operator">=</span> <span class="hljs-number">1</span>; j &lt; m + <span class="hljs-number">1</span>; j++) &#123;<br>                <span class="hljs-type">int</span> <span class="hljs-variable">left</span> <span class="hljs-operator">=</span> d[i - <span class="hljs-number">1</span>][j] + <span class="hljs-number">1</span>;<br>                <span class="hljs-type">int</span> <span class="hljs-variable">down</span> <span class="hljs-operator">=</span> d[i][j - <span class="hljs-number">1</span>] + <span class="hljs-number">1</span>;<br>                <span class="hljs-type">int</span> <span class="hljs-variable">left_down</span> <span class="hljs-operator">=</span> d[i - <span class="hljs-number">1</span>][j - <span class="hljs-number">1</span>];<br>                <span class="hljs-keyword">if</span> (!Objects.equals(tagList1.get(i - <span class="hljs-number">1</span>), tagList2.get(j - <span class="hljs-number">1</span>))) &#123;<br>                    left_down += <span class="hljs-number">1</span>;<br>                &#125;<br>                d[i][j] = Math.min(left, Math.min(down, left_down));<br>            &#125;<br>        &#125;<br>        <span class="hljs-keyword">return</span> d[n][m];<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 编辑距离算法（用于计算最相似的两个字符串）</span><br><span class="hljs-comment">     * 原理：&lt;a href=&quot;https://blog.csdn.net/DBC_121/article/details/104198838&quot;&gt;...&lt;/a&gt;</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> word1 字符串1</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> word2 字符串2</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 操作数</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-type">int</span> <span class="hljs-title function_">minDistance</span><span class="hljs-params">(String word1, String word2)</span> &#123;<br>        <span class="hljs-type">int</span> <span class="hljs-variable">n</span> <span class="hljs-operator">=</span> word1.length();<br>        <span class="hljs-type">int</span> <span class="hljs-variable">m</span> <span class="hljs-operator">=</span> word2.length();<br><br>        <span class="hljs-keyword">if</span> (n * m == <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-keyword">return</span> n + m;<br>        &#125;<br><br>        <span class="hljs-type">int</span>[][] d = <span class="hljs-keyword">new</span> <span class="hljs-title class_">int</span>[n + <span class="hljs-number">1</span>][m + <span class="hljs-number">1</span>];<br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; i &lt; n + <span class="hljs-number">1</span>; i++) &#123;<br>            d[i][<span class="hljs-number">0</span>] = i;<br>        &#125;<br><br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">j</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; j &lt; m + <span class="hljs-number">1</span>; j++) &#123;<br>            d[<span class="hljs-number">0</span>][j] = j;<br>        &#125;<br><br>        <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">1</span>; i &lt; n + <span class="hljs-number">1</span>; i++) &#123;<br>            <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">j</span> <span class="hljs-operator">=</span> <span class="hljs-number">1</span>; j &lt; m + <span class="hljs-number">1</span>; j++) &#123;<br>                <span class="hljs-type">int</span> <span class="hljs-variable">left</span> <span class="hljs-operator">=</span> d[i - <span class="hljs-number">1</span>][j] + <span class="hljs-number">1</span>;<br>                <span class="hljs-type">int</span> <span class="hljs-variable">down</span> <span class="hljs-operator">=</span> d[i][j - <span class="hljs-number">1</span>] + <span class="hljs-number">1</span>;<br>                <span class="hljs-type">int</span> <span class="hljs-variable">left_down</span> <span class="hljs-operator">=</span> d[i - <span class="hljs-number">1</span>][j - <span class="hljs-number">1</span>];<br>                <span class="hljs-keyword">if</span> (word1.charAt(i - <span class="hljs-number">1</span>) != word2.charAt(j - <span class="hljs-number">1</span>)) &#123;<br>                    left_down += <span class="hljs-number">1</span>;<br>                &#125;<br>                d[i][j] = Math.min(left, Math.min(down, left_down));<br>            &#125;<br>        &#125;<br>        <span class="hljs-keyword">return</span> d[n][m];<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="就实现了俩方法：匹配俩标签-匹配俩字符串"><a href="#就实现了俩方法：匹配俩标签-匹配俩字符串" class="headerlink" title="就实现了俩方法：匹配俩标签  匹配俩字符串"></a>就实现了俩方法：匹配俩标签  匹配俩字符串</h5></li>
<li><h5 id="简单做个测试吧"><a href="#简单做个测试吧" class="headerlink" title="简单做个测试吧"></a>简单做个测试吧</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@SpringBootTest(classes = UserCenterApplication.class)</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">AlgorithmUtilsTest</span> &#123;<br>    <span class="hljs-meta">@Test</span><br>    <span class="hljs-keyword">void</span> <span class="hljs-title function_">test</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">str1</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;鱼皮是狗&quot;</span>;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">str2</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;鱼皮不是狗&quot;</span>;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">str3</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;鱼皮是鱼不是狗&quot;</span>;<br><span class="hljs-comment">//        String str4 = &quot;鱼皮是猫&quot;;</span><br>        <span class="hljs-comment">// 1</span><br>        <span class="hljs-type">int</span> <span class="hljs-variable">score1</span> <span class="hljs-operator">=</span> AlgorithmUtils.minDistance(str1, str2);<br>        <span class="hljs-comment">// 3</span><br>        <span class="hljs-type">int</span> <span class="hljs-variable">score2</span> <span class="hljs-operator">=</span> AlgorithmUtils.minDistance(str1, str3);<br>        System.out.println(score1);<br>        System.out.println(score2);<br>    &#125;<br><br>    <span class="hljs-meta">@Test</span><br>    <span class="hljs-keyword">void</span> <span class="hljs-title function_">testCompareTags</span><span class="hljs-params">()</span> &#123;<br>        List&lt;String&gt; tagList1 = Arrays.asList(<span class="hljs-string">&quot;Java&quot;</span>, <span class="hljs-string">&quot;大一&quot;</span>, <span class="hljs-string">&quot;男&quot;</span>);<br>        List&lt;String&gt; tagList2 = Arrays.asList(<span class="hljs-string">&quot;Java&quot;</span>, <span class="hljs-string">&quot;大一&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>);<br>        List&lt;String&gt; tagList3 = Arrays.asList(<span class="hljs-string">&quot;Python&quot;</span>, <span class="hljs-string">&quot;大二&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>);<br>        <span class="hljs-comment">// 1</span><br>        <span class="hljs-type">int</span> <span class="hljs-variable">score1</span> <span class="hljs-operator">=</span> AlgorithmUtils.minDistance(tagList1, tagList2);<br>        <span class="hljs-comment">// 3</span><br>        <span class="hljs-type">int</span> <span class="hljs-variable">score2</span> <span class="hljs-operator">=</span> AlgorithmUtils.minDistance(tagList1, tagList3);<br>        System.out.println(score1);<br>        System.out.println(score2);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="没错，直接照搬鱼皮的哈哈"><a href="#没错，直接照搬鱼皮的哈哈" class="headerlink" title="没错，直接照搬鱼皮的哈哈"></a>没错，直接照搬鱼皮的哈哈</h5></li>
<li><h5 id="测试完成-了解到编辑距离算法的功能就行"><a href="#测试完成-了解到编辑距离算法的功能就行" class="headerlink" title="测试完成!  了解到编辑距离算法的功能就行"></a>测试完成!  了解到编辑距离算法的功能就行</h5></li>
</ul>
<h3 id="匹配用户接口"><a href="#匹配用户接口" class="headerlink" title="匹配用户接口"></a>匹配用户接口</h3><ul>
<li><h5 id="controller层-7"><a href="#controller层-7" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 用户匹配</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> num     推荐/匹配数目</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request request 获取登陆用户</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 匹配到的用户</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@GetMapping(&quot;/match&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;List&lt;User&gt;&gt; <span class="hljs-title function_">matchUsers</span><span class="hljs-params">(Integer num, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// controller对参数的校验</span><br>        <span class="hljs-keyword">if</span> (num == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR);<br>        <br>        List&lt;User&gt; userList = userService.matchUsers(num, request);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(userList);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="service层-6"><a href="#service层-6" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 用户匹配</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> num     推荐/匹配数目</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request request 获取登陆用户</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 匹配到的用户</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> List&lt;User&gt; <span class="hljs-title function_">matchUsers</span><span class="hljs-params">(<span class="hljs-type">long</span> num, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 1.获取登录用户标签(json字符串 -&gt; List列表)</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>       <span class="hljs-type">String</span> <span class="hljs-variable">tags</span> <span class="hljs-operator">=</span> loginUser.getTags();<br>       <span class="hljs-type">Gson</span> <span class="hljs-variable">gson</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>();<br>       List&lt;String&gt; tagList = gson.fromJson(tags, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeToken</span>&lt;List&lt;String&gt;&gt;() &#123;<br>       &#125;.getType());<br>       System.out.println(tagList);<br><br>       <span class="hljs-comment">// 2.遍历所有查询到的用户, 依次进行标签比较, 并存储到容器中</span><br>       <span class="hljs-comment">// 2.1.查询到所有用户</span><br>       List&lt;User&gt; userList = <span class="hljs-built_in">this</span>.list();<br>       <span class="hljs-comment">// 2.2.使用SortedMap容器</span><br>       SortedMap&lt;Long, Integer&gt; indexDistanceMap = <span class="hljs-keyword">new</span> <span class="hljs-title class_">TreeMap</span>&lt;&gt;();<br>       <span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>; i &lt; userList.size(); i++) &#123;<br>           <span class="hljs-comment">// 2.2.1.拿到用户</span><br>           <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> userList.get(i);<br>           <span class="hljs-comment">// 2.2.2.拿到其标签</span><br>           <span class="hljs-type">String</span> <span class="hljs-variable">userTags</span> <span class="hljs-operator">=</span> user.getTags();<br>           <span class="hljs-comment">// 2.2.3.无标签用户, 直接过滤</span><br>           <span class="hljs-keyword">if</span> (StringUtils.isBlank(userTags)) &#123;<br>               <span class="hljs-keyword">continue</span>;<br>           &#125;<br>           <span class="hljs-comment">// 2.2.4.转换标签(json字符串 -&gt; List列表)</span><br>           List&lt;String&gt; userTagList = gson.fromJson(userTags, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeToken</span>&lt;List&lt;String&gt;&gt;() &#123;<br>           &#125;.getType());<br>           <span class="hljs-comment">// 2.2.5.进行标签比较(编辑距离算法)</span><br>           <span class="hljs-type">long</span> <span class="hljs-variable">distance</span> <span class="hljs-operator">=</span> AlgorithmUtils.minDistance(tagList, userTagList);<br>           <span class="hljs-comment">// 2.2.6.将比较结果存入SortedMap容器中(存储了用户下标和匹配度, 并按distance升序排列)</span><br>           indexDistanceMap.put(distance, i);<br>       &#125;<br><br>       <span class="hljs-comment">// 3.拿取匹配度前num条数据, 并存储到容器中</span><br>       <span class="hljs-comment">// 3.1.使用List容器存储</span><br>       List&lt;User&gt; userListVo = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>       <span class="hljs-type">int</span> <span class="hljs-variable">i</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>;<br>       <span class="hljs-keyword">for</span> (Map.Entry&lt;Long, Integer&gt; entry : indexDistanceMap.entrySet()) &#123;<br>           <span class="hljs-comment">// 3.1.1.存储数量到位, 直接退出</span><br>           <span class="hljs-keyword">if</span> (i &gt; num) &#123;<br>               <span class="hljs-keyword">break</span>;<br>           &#125;<br>           <span class="hljs-comment">// 3.1.2.拿取用户, 将用户信息存放进List容器中</span><br>           <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> userList.get(entry.getValue());<br>           userListVo.add(user);<br>           i++;<br>       &#125;<br><br>       <span class="hljs-comment">// 4.返回结果</span><br>       <span class="hljs-keyword">return</span> userListVo;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="拿接口文档测试一下"><a href="#拿接口文档测试一下" class="headerlink" title="拿接口文档测试一下"></a>拿接口文档测试一下</h5></li>
</ul>
<h2 id="阶段性问题-9"><a href="#阶段性问题-9" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="这里的SortedMap是用来存储用户和匹配度的，且默认按key值升序排序，不允许重复key值，实现起来有点问题，改天看完鱼皮再试一试，先记着-2023-05-20晚"><a href="#这里的SortedMap是用来存储用户和匹配度的，且默认按key值升序排序，不允许重复key值，实现起来有点问题，改天看完鱼皮再试一试，先记着-2023-05-20晚" class="headerlink" title="这里的SortedMap是用来存储用户和匹配度的，且默认按key值升序排序，不允许重复key值，实现起来有点问题，改天看完鱼皮再试一试，先记着 (2023/05/20晚)"></a>这里的SortedMap是用来存储用户和匹配度的，且默认按key值升序排序，不允许重复key值，实现起来有点问题，改天看完鱼皮再试一试，先记着 (2023/05/20晚)</h5></li>
<li><p>实现随机匹配的逻辑, 我们要优化两个点: 执行时长为多少? 是否能正确匹配? </p>
</li>
<li><p>首先优化执行时长, 有以下几点可以优化:</p>
</li>
</ul>
<figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs applescript"><span class="hljs-comment">-- 必做</span><br><span class="hljs-number">1.</span>数据量过大时, 不要循环输出日志<br><span class="hljs-number">2.</span>细节: 匹配结果剔除自己<br><span class="hljs-number">3.</span>标签为空, 不查<br><span class="hljs-number">4.</span>只查需要的字段(即投影, 如只查<span class="hljs-built_in">id</span>和tags)<br><br><span class="hljs-comment">-- 选做</span><br><span class="hljs-number">1.</span>维护一个固定长度的有序集合, 以时间换空间<br><span class="hljs-number">2.</span>根据部分标签筛选(前提是能区分出那些标签比较重要)<br><span class="hljs-number">3.</span>提前查, 搞缓存<br></code></pre></td></tr></table></figure>

<ul>
<li><p>然后就是优化能否正确匹配了, 很显然, 昨晚的那个SortedMap并不能完成这个功能, 我就说嘛</p>
</li>
<li><p>SortedMap默认按key值升序排列, 把distance做value是不行的, 把distance做key值也不行, 因为SortedMap不允许重复key, 那样的话相同distance就被顶替了.</p>
</li>
<li><p>比较可行的方法是把用户和相应相似度存放进List中, 再按distance升序排序, 最后查出前num条</p>
</li>
<li><p>代码实现的话就明天写吧 (2023/05/21晚)</p>
</li>
<li><p>他妈的连抄带粘写完了, 先不详细解释了, 必做的优化点做到位了, 剩下的逻辑看着真恶心, 放下边慢慢体会吧:</p>
</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 用户匹配</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> num     推荐/匹配数目</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request request 获取登陆用户</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 匹配到的用户</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> List&lt;User&gt; <span class="hljs-title function_">matchUsers</span><span class="hljs-params">(<span class="hljs-type">long</span> num, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 1.获取登录用户标签(json字符串 -&gt; List列表)</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>       <span class="hljs-type">String</span> <span class="hljs-variable">tags</span> <span class="hljs-operator">=</span> loginUser.getTags();<br>       <span class="hljs-type">Gson</span> <span class="hljs-variable">gson</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>();<br>       List&lt;String&gt; tagList = gson.fromJson(tags, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeToken</span>&lt;List&lt;String&gt;&gt;() &#123;<br>       &#125;.getType());<br><br>       QueryWrapper&lt;User&gt; queryWrapper = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>       queryWrapper.isNotNull(<span class="hljs-string">&quot;tags&quot;</span>);<br>       queryWrapper.select(<span class="hljs-string">&quot;id&quot;</span>, <span class="hljs-string">&quot;tags&quot;</span>);<br>       <span class="hljs-comment">// 2.遍历所有查询到的用户, 依次进行标签比较, 并存储到容器中</span><br>       <span class="hljs-comment">// 2.1.查询到所有用户</span><br>       List&lt;User&gt; userList = <span class="hljs-built_in">this</span>.list();<br>       <span class="hljs-comment">// 2.2.使用SortedMap容器</span><br>       List&lt;Pair&lt;User, Long&gt;&gt; userDistanceList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>       <span class="hljs-keyword">for</span> (User user : userList) &#123;<br>           <span class="hljs-comment">// 2.2.1.拿到用户</span><br>           <span class="hljs-comment">// 2.2.2.拿到其标签</span><br>           <span class="hljs-type">String</span> <span class="hljs-variable">userTags</span> <span class="hljs-operator">=</span> user.getTags();<br>           <span class="hljs-comment">// 2.2.3.无标签用户, 直接过滤, 匹配结果剔除自己</span><br>           <span class="hljs-keyword">if</span> (StringUtils.isBlank(userTags) || user.getId().equals(loginUser.getId())) &#123;<br>               <span class="hljs-keyword">continue</span>;<br>           &#125;<br>           <span class="hljs-comment">// 2.2.4.转换标签(json字符串 -&gt; List列表)</span><br>           List&lt;String&gt; userTagList = gson.fromJson(userTags, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeToken</span>&lt;List&lt;String&gt;&gt;() &#123;<br>           &#125;.getType());<br>           <span class="hljs-comment">// 2.2.5.进行标签比较(编辑距离算法)</span><br>           <span class="hljs-type">long</span> <span class="hljs-variable">distance</span> <span class="hljs-operator">=</span> AlgorithmUtils.minDistance(tagList, userTagList);<br>           <span class="hljs-comment">// 2.2.6.将比较结果存入SortedMap容器中(存储了用户下标和匹配度, 并按distance升序排列)</span><br>           userDistanceList.add(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Pair</span>&lt;&gt;(user, distance));<br>       &#125;<br><br>       <span class="hljs-comment">// 3.按编辑距离由小到大排序</span><br>       List&lt;Pair&lt;User, Long&gt;&gt; sortedUserDistanceList = userDistanceList.stream()<br>               .sorted((a, b) -&gt; (<span class="hljs-type">int</span>) (a.getB() - b.getB()))<br>               .limit(num)<br>               .collect(Collectors.toList());<br><br>       <span class="hljs-comment">// 4.有顺序的userID列表</span><br>       List&lt;Long&gt; userIdList = sortedUserDistanceList.stream().map(pair -&gt; pair.getA().getId()).collect(Collectors.toList());<br><br>       <span class="hljs-comment">// 5.根据id查询user完整信息</span><br>       QueryWrapper&lt;User&gt; userQueryWrapper = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>       userQueryWrapper.in(<span class="hljs-string">&quot;id&quot;</span>, userIdList);<br>       Map&lt;Long, List&lt;User&gt;&gt; userIdUserListMap = <span class="hljs-built_in">this</span>.list(userQueryWrapper).stream()<br>               .map(<span class="hljs-built_in">this</span>::getSafetyUser)<br>               .collect(Collectors.groupingBy(User::getId));<br><br>       <span class="hljs-comment">// 6.因为上面查询打乱了顺序，这里根据上面有序的userId列表赋值</span><br>       List&lt;User&gt; finalUserList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>       <span class="hljs-keyword">for</span> (Long userId : userIdList) &#123;<br>           finalUserList.add(userIdUserListMap.get(userId).get(<span class="hljs-number">0</span>));<br>       &#125;<br>       <br>       <span class="hljs-comment">// 7.返回匹配用户列表</span><br>       <span class="hljs-keyword">return</span> finalUserList;<br>   &#125;<br></code></pre></td></tr></table></figure>

<h3 id="匹配用户页面"><a href="#匹配用户页面" class="headerlink" title="匹配用户页面"></a>匹配用户页面</h3><ul>
<li>之前写过的分页查询所有用户就先保留了</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;template&gt;<br>  &lt;!-- 寄语 --&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span></span></span><br><span class="hljs-tag"><span class="language-xml">    <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;volume-o&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">    <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;盛年不重来，一日难再晨。及时当勉励，岁月不待人。&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">  /&gt;</span></span><br>&lt;!-- 首页轮播图 --&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">van-swipe</span> <span class="hljs-attr">:autoplay</span>=<span class="hljs-string">&quot;3000&quot;</span> <span class="hljs-attr">lazy-render</span> <span class="hljs-attr">:width</span>=<span class="hljs-string">&quot;480&quot;</span> <span class="hljs-attr">:height</span>=<span class="hljs-string">&quot;300&quot;</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-swipe-item</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;image in images&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;image&quot;</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">&quot;image&quot;</span> /&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-item</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe</span>&gt;</span></span><br><br>  &lt;!-- 匹配用户表单 --&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;recommend&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;padding-bottom: 53px&quot;</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;&#123; color: &#x27;#1989fa&#x27;, borderColor: &#x27;#1989fa&#x27;, padding: &#x27;0 16px&#x27; &#125;&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">    &gt;</span></span><br><span class="language-xml">      每周推荐用户</span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml">    <span class="hljs-comment">&lt;!-- 匹配用户信息页 --&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-card</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;user in matchUserList&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:tag</span>=<span class="hljs-string">&quot;`$&#123;user.gender&#125;`&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:title</span>=<span class="hljs-string">&quot;`$&#123;user.userAccount&#125; $&#123;user.username&#125; $&#123;user.planetCode&#125;`&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:desc</span>=<span class="hljs-string">&quot;user.profile&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:thumb</span>=<span class="hljs-string">&quot;`$&#123;user.avatarUrl&#125;`&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">    &gt;</span></span><br><span class="language-xml">      <span class="hljs-comment">&lt;!-- 标签展示 --&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">tags</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">plain</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;tag in user.tags&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-right: 3px; margin-top: 3px&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">        &gt;</span></span><br><span class="language-xml">          &#123;&#123; tag &#125;&#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">footer</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>联系俺<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">van-card</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-comment">&lt;!-- 无用户信息展示 --&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;!matchUserList&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;获取用户信息失败&quot;</span> /&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><br>  &lt;!-- 用户表单 --&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;index&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;padding-bottom: 53px&quot;</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;&#123; color: &#x27;#1989fa&#x27;, borderColor: &#x27;#1989fa&#x27;, padding: &#x27;0 16px&#x27; &#125;&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">    &gt;</span></span><br><span class="language-xml">      主题</span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml">    <span class="hljs-comment">&lt;!-- 用户信息页 --&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-card</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;user in userList&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:tag</span>=<span class="hljs-string">&quot;`$&#123;user.gender&#125;`&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:title</span>=<span class="hljs-string">&quot;`$&#123;user.userAccount&#125; $&#123;user.username&#125; $&#123;user.planetCode&#125;`&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:desc</span>=<span class="hljs-string">&quot;user.profile&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:thumb</span>=<span class="hljs-string">&quot;`$&#123;user.avatarUrl&#125;`&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">    &gt;</span></span><br><span class="language-xml">      <span class="hljs-comment">&lt;!-- 标签展示 --&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">tags</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">plain</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;tag in user.tags&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-right: 3px; margin-top: 3px&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">        &gt;</span></span><br><span class="language-xml">          &#123;&#123; tag &#125;&#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">footer</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>联系俺<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">van-card</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-comment">&lt;!-- 无用户信息展示 --&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;!userList&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;获取用户信息失败&quot;</span> /&gt;</span></span><br><span class="language-xml">    <span class="hljs-comment">&lt;!-- 分页插件 --&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">van-pagination</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;userList&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;currentPage&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:total-items</span>=<span class="hljs-string">&quot;total&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">:items-per-page</span>=<span class="hljs-string">&quot;pageSize&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">      <span class="hljs-attr">force-ellipses</span></span></span><br><span class="hljs-tag"><span class="language-xml">      @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;change&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">    /&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>  &lt;!-- 返回顶部 --&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">van-back-top</span> /&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">setup</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> &#123; onMounted &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> &#123; userType &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../models/user&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../plugins/myAxios&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 轮播图片</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> images = [</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-string">&quot;https://gitee.com/deng-2022/pictures/raw/master/images/sunset.jpg&quot;</span>,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-string">&quot;https://gitee.com/deng-2022/pictures/raw/master/images/typora-icon.png&quot;</span>,</span></span><br><span class="language-javascript"><span class="language-xml">];</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 匹配用户列表</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> matchUserList = <span class="hljs-title function_">ref</span>([]);</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 用户列表</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> userList = <span class="hljs-title function_">ref</span>([]);</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 当前页码</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> currentPage = <span class="hljs-title function_">ref</span>(<span class="hljs-number">1</span>);</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 每页显示数</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">let</span> pageSize = <span class="hljs-number">10</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 总记录数</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">let</span> <span class="hljs-attr">total</span>: number = <span class="hljs-number">0</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">//</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> <span class="hljs-title function_">matchUsers</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// 发送请求, 获取用户数据列表</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-keyword">const</span> userListData = <span class="hljs-keyword">await</span> myAxios</span></span><br><span class="language-javascript"><span class="language-xml">    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/match&quot;</span>, &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-attr">params</span>: &#123;</span></span><br><span class="language-javascript"><span class="language-xml">        <span class="hljs-attr">num</span>: <span class="hljs-number">3</span>,</span></span><br><span class="language-javascript"><span class="language-xml">      &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;)</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 响应</span></span></span><br><span class="language-javascript"><span class="language-xml">    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-comment">// 返回响应数据（用户列表）</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);</span></span><br><span class="language-javascript"><span class="language-xml">      total = response.<span class="hljs-property">data</span>.<span class="hljs-property">total</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      pageSize = response.<span class="hljs-property">data</span>.<span class="hljs-property">size</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;)</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 抛异常</span></span></span><br><span class="language-javascript"><span class="language-xml">    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;);</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// 成功拿到用户数据列表(不为空)</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-keyword">if</span> (userListData) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 遍历用户数据列表</span></span></span><br><span class="language-javascript"><span class="language-xml">    userListData.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">user: userType</span>) =&gt;</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-comment">// 将gender的 &quot;1&quot;/&quot;0&quot; 渲染成 &quot;男&quot;/&quot;女&quot;</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;1&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;男&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;0&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;女&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-comment">// JSON字符串序列化为列表</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">tags</span>) user.<span class="hljs-property">tags</span> = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(user.<span class="hljs-property">tags</span>);</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;);</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 处理过后的用户列表</span></span></span><br><span class="language-javascript"><span class="language-xml">    matchUserList.<span class="hljs-property">value</span> = userListData;</span></span><br><span class="language-javascript"><span class="language-xml">  &#125;</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> <span class="hljs-title function_">getPage</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">currentPage: number</span>) =&gt; &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// 发送请求, 获取用户数据列表</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-keyword">const</span> userListData = <span class="hljs-keyword">await</span> myAxios</span></span><br><span class="language-javascript"><span class="language-xml">    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/recommend&quot;</span>, &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-attr">params</span>: &#123;</span></span><br><span class="language-javascript"><span class="language-xml">        <span class="hljs-attr">currentPage</span>: currentPage,</span></span><br><span class="language-javascript"><span class="language-xml">        <span class="hljs-attr">pageSize</span>: pageSize,</span></span><br><span class="language-javascript"><span class="language-xml">      &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;)</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 响应</span></span></span><br><span class="language-javascript"><span class="language-xml">    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-comment">// 返回响应数据（用户列表）</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);</span></span><br><span class="language-javascript"><span class="language-xml">      total = response.<span class="hljs-property">data</span>.<span class="hljs-property">total</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      pageSize = response.<span class="hljs-property">data</span>.<span class="hljs-property">size</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>;</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;)</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 抛异常</span></span></span><br><span class="language-javascript"><span class="language-xml">    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;);</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// 成功拿到用户数据列表(不为空)</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-keyword">if</span> (userListData) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 遍历用户数据列表</span></span></span><br><span class="language-javascript"><span class="language-xml">    userListData.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">user: userType</span>) =&gt;</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-comment">// 将gender的 &quot;1&quot;/&quot;0&quot; 渲染成 &quot;男&quot;/&quot;女&quot;</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;1&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;男&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;0&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;女&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-comment">// JSON字符串序列化为列表</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">if</span> (user.<span class="hljs-property">tags</span>) user.<span class="hljs-property">tags</span> = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(user.<span class="hljs-property">tags</span>);</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;);</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-comment">// 处理过后的用户列表</span></span></span><br><span class="language-javascript"><span class="language-xml">    userList.<span class="hljs-property">value</span> = userListData;</span></span><br><span class="language-javascript"><span class="language-xml">  &#125;</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 用户列表, 钩子函数</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// 匹配用户</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">matchUsers</span>();</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// 主页</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">getPage</span>(currentPage.<span class="hljs-property">value</span>);</span></span><br><span class="language-javascript"><span class="language-xml">&#125;);</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// 改变页码</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> <span class="hljs-title function_">change</span> = (<span class="hljs-params"></span>) =&gt; &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentPage.<span class="hljs-property">value</span>);</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(userList.<span class="hljs-property">value</span>.<span class="hljs-property">length</span>);</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">getPage</span>(currentPage.<span class="hljs-property">value</span>);</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="加了俩组件-寄语和轮播图"><a href="#加了俩组件-寄语和轮播图" class="headerlink" title="加了俩组件 寄语和轮播图"></a>加了俩组件 寄语和轮播图</h5></li>
<li><h5 id="然后我就想用自己的图片来做这个轮播图"><a href="#然后我就想用自己的图片来做这个轮播图" class="headerlink" title="然后我就想用自己的图片来做这个轮播图"></a>然后我就想用自己的图片来做这个轮播图</h5></li>
<li><h5 id="那我搭建一个自己的图床呗-拿个图片老方便了-学一学怎么搭建图床-说干就干"><a href="#那我搭建一个自己的图床呗-拿个图片老方便了-学一学怎么搭建图床-说干就干" class="headerlink" title="那我搭建一个自己的图床呗 拿个图片老方便了 学一学怎么搭建图床 说干就干"></a>那我搭建一个自己的图床呗 拿个图片老方便了 学一学怎么搭建图床 说干就干</h5></li>
</ul>
<h2 id="搭建图床"><a href="#搭建图床" class="headerlink" title="搭建图床"></a>搭建图床</h2><ul>
<li><h5 id="搭建过程就不多说了-收藏了好几个CSDN博客教程"><a href="#搭建过程就不多说了-收藏了好几个CSDN博客教程" class="headerlink" title="搭建过程就不多说了 收藏了好几个CSDN博客教程"></a>搭建过程就不多说了 收藏了好几个CSDN博客教程</h5></li>
<li><h5 id="最重要的是在PicGo里下一个插件-搭建一个Gitee图床-不用GitHub图床是因为这玩意儿BUG太多了-尤其是网络原因"><a href="#最重要的是在PicGo里下一个插件-搭建一个Gitee图床-不用GitHub图床是因为这玩意儿BUG太多了-尤其是网络原因" class="headerlink" title="最重要的是在PicGo里下一个插件  搭建一个Gitee图床 (不用GitHub图床是因为这玩意儿BUG太多了 尤其是网络原因)"></a>最重要的是在PicGo里下一个插件  搭建一个Gitee图床 (不用GitHub图床是因为这玩意儿BUG太多了 尤其是网络原因)</h5></li>
<li><h5 id="两个图床的配置都放下面了-我用了Gitee图床"><a href="#两个图床的配置都放下面了-我用了Gitee图床" class="headerlink" title="两个图床的配置都放下面了 我用了Gitee图床"></a>两个图床的配置都放下面了 我用了Gitee图床</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230523223215190.png" alt="image-20230523223215190"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230523223310839.png" alt="image-20230523223310839"></p>
<ul>
<li><h5 id="上传到图床的图片可以随意使用了"><a href="#上传到图床的图片可以随意使用了" class="headerlink" title="上传到图床的图片可以随意使用了"></a>上传到图床的图片可以随意使用了</h5></li>
<li><h5 id="在Typora-gt-偏好设置-gt-图像-里配置好上传服务和PicGo路径后-Typora里使用到的图片都会自动上传到图床上去"><a href="#在Typora-gt-偏好设置-gt-图像-里配置好上传服务和PicGo路径后-Typora里使用到的图片都会自动上传到图床上去" class="headerlink" title="在Typora -&gt; 偏好设置 -&gt; 图像 里配置好上传服务和PicGo路径后 Typora里使用到的图片都会自动上传到图床上去"></a>在Typora -&gt; 偏好设置 -&gt; 图像 里配置好上传服务和PicGo路径后 Typora里使用到的图片都会自动上传到图床上去</h5></li>
<li><h5 id="最后展示一下我刚上传到图床里的图片吧"><a href="#最后展示一下我刚上传到图床里的图片吧" class="headerlink" title="最后展示一下我刚上传到图床里的图片吧"></a>最后展示一下我刚上传到图床里的图片吧</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/sunset.jpg"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230523223215190.png"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/sunset.jpg"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/girl3.jpg"></p>
<ul>
<li><h5 id="操他妈的这张图片怎么就显示不出来呢"><a href="#操他妈的这张图片怎么就显示不出来呢" class="headerlink" title="操他妈的这张图片怎么就显示不出来呢"></a>操他妈的这张图片怎么就显示不出来呢</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/girl3.jpg"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/error.png"></p>
<ul>
<li><h5 id="操他妈的上个厕所就能显示了"><a href="#操他妈的上个厕所就能显示了" class="headerlink" title="操他妈的上个厕所就能显示了"></a>操他妈的上个厕所就能显示了</h5></li>
<li><h5 id="总之-图床可以正常使用了-现在把浏览器收藏夹整理一下先-2023-05-23晚"><a href="#总之-图床可以正常使用了-现在把浏览器收藏夹整理一下先-2023-05-23晚" class="headerlink" title="总之 图床可以正常使用了 现在把浏览器收藏夹整理一下先 (2023/05/23晚)"></a>总之 图床可以正常使用了 现在把浏览器收藏夹整理一下先 (2023/05/23晚)</h5></li>
<li><h5 id="今天距伙伴匹配系统从零开发-整整俩个月了-简单纪念一下-但是今天不想编码了-干点儿别的吧-2023-05-24晚"><a href="#今天距伙伴匹配系统从零开发-整整俩个月了-简单纪念一下-但是今天不想编码了-干点儿别的吧-2023-05-24晚" class="headerlink" title="今天距伙伴匹配系统从零开发 整整俩个月了 简单纪念一下 但是今天不想编码了 干点儿别的吧 (2023/05/24晚)"></a>今天距伙伴匹配系统从零开发 整整俩个月了 简单纪念一下 但是今天不想编码了 干点儿别的吧 (2023/05/24晚)</h5></li>
</ul>
<h1 id="持续优化"><a href="#持续优化" class="headerlink" title="持续优化"></a>持续优化</h1><ul>
<li><h5 id="之后的优化就统一写这里吧（新功能实现除外）"><a href="#之后的优化就统一写这里吧（新功能实现除外）" class="headerlink" title="之后的优化就统一写这里吧（新功能实现除外）"></a>之后的优化就统一写这里吧（新功能实现除外）</h5></li>
</ul>
<h3 id="随机匹配优化1-0"><a href="#随机匹配优化1-0" class="headerlink" title="随机匹配优化1.0"></a>随机匹配优化1.0</h3><ul>
<li><h5 id="增加了个可以开关的按钮"><a href="#增加了个可以开关的按钮" class="headerlink" title="增加了个可以开关的按钮"></a>增加了个可以开关的按钮</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;van-field name=<span class="hljs-string">&quot;switch&quot;</span> label=<span class="hljs-string">&quot;开启每周推荐&quot;</span>&gt;<br>   <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>&gt;</span></span><br><span class="language-xml">     <span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;checked&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;matchUsers&quot;</span> /&gt;</span></span><br><span class="language-xml">   <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span><br> &lt;/van-field&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 开启/关闭每周推荐</span><br><span class="hljs-keyword">const</span> checked = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);<br><span class="hljs-comment">// 匹配用户列表</span><br><span class="hljs-keyword">const</span> matchUserList = <span class="hljs-title function_">ref</span>([]);<br><span class="hljs-comment">// 每周推荐功能</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">matchUsers</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;checked = &quot;</span> + checked.<span class="hljs-property">value</span>);<br>  <span class="hljs-comment">// 每周推荐是否开启</span><br>  <span class="hljs-keyword">if</span> (checked.<span class="hljs-property">value</span>) &#123;<br>    <span class="hljs-comment">// 发送请求, 获取用户数据列表</span><br>    <span class="hljs-keyword">const</span> userListData = <span class="hljs-keyword">await</span> myAxios<br>      .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/match&quot;</span>, &#123;<br>        <span class="hljs-attr">params</span>: &#123;<br>          <span class="hljs-attr">num</span>: <span class="hljs-number">3</span>,<br>        &#125;,<br>      &#125;)<br>      <span class="hljs-comment">// 响应</span><br>      .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>        <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);<br>        total = response.<span class="hljs-property">data</span>.<span class="hljs-property">total</span>;<br>        pageSize = response.<span class="hljs-property">data</span>.<span class="hljs-property">size</span>;<br>        <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>      &#125;)<br>      <span class="hljs-comment">// 抛异常</span><br>      .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>      &#125;);<br>    <span class="hljs-comment">// 成功拿到用户数据列表(不为空)</span><br>    <span class="hljs-keyword">if</span> (userListData) &#123;<br>      <span class="hljs-comment">// 遍历用户数据列表</span><br>      userListData.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">user: userType</span>) =&gt;</span> &#123;<br>        <span class="hljs-comment">// 将gender的 &quot;1&quot;/&quot;0&quot; 渲染成 &quot;男&quot;/&quot;女&quot;</span><br>        <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;1&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;男&quot;</span>;<br>        <span class="hljs-keyword">if</span> (user.<span class="hljs-property">gender</span> === <span class="hljs-string">&quot;0&quot;</span>) user.<span class="hljs-property">gender</span> = <span class="hljs-string">&quot;女&quot;</span>;<br>        <span class="hljs-comment">// JSON字符串序列化为列表</span><br>        <span class="hljs-keyword">if</span> (user.<span class="hljs-property">tags</span>) user.<span class="hljs-property">tags</span> = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(user.<span class="hljs-property">tags</span>);<br>      &#125;);<br>      <span class="hljs-comment">// 处理过后的用户列表</span><br>      matchUserList.<span class="hljs-property">value</span> = userListData;<br>    &#125;<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    matchUserList.<span class="hljs-property">value</span> = [];<br>  &#125;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里有个BUG，想实现关闭按钮后显示无用户页面无果（待解决）"><a href="#这里有个BUG，想实现关闭按钮后显示无用户页面无果（待解决）" class="headerlink" title="这里有个BUG，想实现关闭按钮后显示无用户页面无果（待解决）"></a>这里有个BUG，想实现关闭按钮后显示无用户页面无果（待解决）</h5></li>
</ul>
<h3 id="页面标题优化"><a href="#页面标题优化" class="headerlink" title="页面标题优化"></a>页面标题优化</h3><ul>
<li><h5 id="还记得咱的页面标题写哪吗？嘿嘿哈哈"><a href="#还记得咱的页面标题写哪吗？嘿嘿哈哈" class="headerlink" title="还记得咱的页面标题写哪吗？嘿嘿哈哈"></a>还记得咱的页面标题写哪吗？嘿嘿哈哈</h5></li>
<li><h5 id="layouts-BasicLayout-vue-下"><a href="#layouts-BasicLayout-vue-下" class="headerlink" title="layouts/BasicLayout.vue 下"></a>layouts/BasicLayout.vue 下</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;!-- 导航栏 --&gt;<br>  &lt;van-nav-bar<br>    title=&quot;标题&quot;<br>    fixed<br>    left-arrow<br>    @click-left=&quot;onClickLeft&quot;<br>    @click-right=&quot;onClickRight&quot;<br>  &gt;<br>    &lt;template #right&gt;<br>      &lt;van-icon name=&quot;search&quot; size=&quot;18&quot; /&gt;<br>    &lt;/template&gt;<br>  &lt;/van-nav-bar&gt;<br><br>  &lt;div id=&quot;content&quot;&gt;<br>    &lt;router-view /&gt;<br>  &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="就在这页增加些逻辑吧，留心下routes，routerAPI的使用"><a href="#就在这页增加些逻辑吧，留心下routes，routerAPI的使用" class="headerlink" title="就在这页增加些逻辑吧，留心下routes，routerAPI的使用"></a>就在这页增加些逻辑吧，留心下routes，routerAPI的使用</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 默认页面标题</span><br><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">DEFAULT_TITLE</span> = <span class="hljs-string">&quot;伙伴匹配&quot;</span>;<br><span class="hljs-comment">// 页面标题</span><br><span class="hljs-keyword">const</span> title = <span class="hljs-title function_">ref</span>(<span class="hljs-variable constant_">DEFAULT_TITLE</span>);<br><br><span class="hljs-comment">// 跳转页面前校验将要跳转的路由(目标路由)</span><br>router.<span class="hljs-title function_">beforeEach</span>(<span class="hljs-function">(<span class="hljs-params">to</span>) =&gt;</span> &#123;<br>  <span class="hljs-comment">// 拿取目标路由的path</span><br>  <span class="hljs-keyword">const</span> toPath = to.<span class="hljs-property">path</span>;<br>  <span class="hljs-comment">// 逐个比对自定义路由中的path</span><br>  <span class="hljs-keyword">const</span> route = routes.<span class="hljs-title function_">find</span>(<span class="hljs-function">(<span class="hljs-params">route</span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">// 匹配到该路由的path</span><br>    <span class="hljs-keyword">return</span> toPath == route.<span class="hljs-property">path</span>;<br>  &#125;);<br>  <span class="hljs-comment">// 设置title为匹配路由的title</span><br>  title.<span class="hljs-property">value</span> = route?.<span class="hljs-property">title</span> ?? <span class="hljs-variable constant_">DEFAULT_TITLE</span>;<br>&#125;);<br><br><span class="hljs-comment">// 左”/“按钮, 返回上个页面</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onClickLeft</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">back</span>();<br>&#125;;<br><span class="hljs-comment">// 跳转至搜索页</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onClickRight</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">push</span>(<span class="hljs-string">&quot;/search&quot;</span>);<br>&#125;;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230526233615488.png" alt="image-20230526233615488"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230526233636359.png" alt="image-20230526233636359"></p>
<ul>
<li><h5 id="效果很明显嘛，完成！"><a href="#效果很明显嘛，完成！" class="headerlink" title="效果很明显嘛，完成！"></a>效果很明显嘛，完成！</h5></li>
</ul>
<h3 id="用户标签优化"><a href="#用户标签优化" class="headerlink" title="用户标签优化"></a>用户标签优化</h3><ul>
<li><h5 id="记得队伍卡片上左上角的状态显示吧，我们优化一下用户卡片上的性别显示"><a href="#记得队伍卡片上左上角的状态显示吧，我们优化一下用户卡片上的性别显示" class="headerlink" title="记得队伍卡片上左上角的状态显示吧，我们优化一下用户卡片上的性别显示"></a>记得队伍卡片上左上角的状态显示吧，我们优化一下用户卡片上的性别显示</h5></li>
<li><h5 id="service-function-getUserGender-ts下："><a href="#service-function-getUserGender-ts下：" class="headerlink" title="service/function/getUserGender.ts下："></a>service/function/getUserGender.ts下：</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 转换stasus</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">getUserGender</span> = (<span class="hljs-params">gender: <span class="hljs-built_in">string</span></span>) =&gt; &#123;<br>  <span class="hljs-keyword">if</span> (gender === <span class="hljs-string">&quot;0&quot;</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;女&quot;</span>;<br>  <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (gender === <span class="hljs-string">&quot;1&quot;</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;男&quot;</span>;<br>  <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;人妖&quot;</span>;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="然后在用户列表页和匹配用户页调用一下就行"><a href="#然后在用户列表页和匹配用户页调用一下就行" class="headerlink" title="然后在用户列表页和匹配用户页调用一下就行"></a>然后在用户列表页和匹配用户页调用一下就行</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;van-card<br>     v-<span class="hljs-keyword">for</span>=<span class="hljs-string">&quot;user in userList&quot;</span><br>     :tag=<span class="hljs-string">&quot;getUserGender(user.gender)&quot;</span><br>     :title=<span class="hljs-string">&quot;`$&#123;user.userAccount&#125; $&#123;user.username&#125; $&#123;user.planetCode&#125;`&quot;</span><br>     :desc=<span class="hljs-string">&quot;user.profile&quot;</span><br>     :thumb=<span class="hljs-string">&quot;`$&#123;user.avatarUrl&#125;`&quot;</span><br>   &gt;<br></code></pre></td></tr></table></figure>

<h2 id="阶段性问题-10"><a href="#阶段性问题-10" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="这里把getTeamStatus-ts也优化了下，结果给网页整空白了，卡了半天发现TeamListPage和TeamPage都调用了这个方法而前者我忘记改过来了，要注意一下"><a href="#这里把getTeamStatus-ts也优化了下，结果给网页整空白了，卡了半天发现TeamListPage和TeamPage都调用了这个方法而前者我忘记改过来了，要注意一下" class="headerlink" title="这里把getTeamStatus.ts也优化了下，结果给网页整空白了，卡了半天发现TeamListPage和TeamPage都调用了这个方法而前者我忘记改过来了，要注意一下"></a>这里把getTeamStatus.ts也优化了下，结果给网页整空白了，卡了半天发现TeamListPage和TeamPage都调用了这个方法而前者我忘记改过来了，要注意一下</h5></li>
<li><h5 id="第一遍做的时候取了user的status，才反应过来user的是gender，又全改了一遍"><a href="#第一遍做的时候取了user的status，才反应过来user的是gender，又全改了一遍" class="headerlink" title="第一遍做的时候取了user的status，才反应过来user的是gender，又全改了一遍"></a>第一遍做的时候取了user的status，才反应过来user的是gender，又全改了一遍</h5></li>
<li><h5 id="然后发现数据库中的gender是varchar型，而status是int型，真几把服，谁设计的表，害我前端数据类型不对应，逻辑判断都有问题"><a href="#然后发现数据库中的gender是varchar型，而status是int型，真几把服，谁设计的表，害我前端数据类型不对应，逻辑判断都有问题" class="headerlink" title="然后发现数据库中的gender是varchar型，而status是int型，真几把服，谁设计的表，害我前端数据类型不对应，逻辑判断都有问题"></a>然后发现数据库中的gender是varchar型，而status是int型，真几把服，谁设计的表，害我前端数据类型不对应，逻辑判断都有问题</h5></li>
<li><h5 id="今天就干到这吧（2023-05-26晚）"><a href="#今天就干到这吧（2023-05-26晚）" class="headerlink" title="今天就干到这吧（2023/05/26晚）"></a>今天就干到这吧（2023/05/26晚）</h5></li>
</ul>
<h3 id="加入队伍"><a href="#加入队伍" class="headerlink" title="加入队伍"></a>加入队伍</h3><ul>
<li><h5 id="他爷爷的，我把这功能忘了"><a href="#他爷爷的，我把这功能忘了" class="headerlink" title="他爷爷的，我把这功能忘了"></a>他爷爷的，我把这功能忘了</h5></li>
<li><h5 id="之前后端接口已经写好了："><a href="#之前后端接口已经写好了：" class="headerlink" title="之前后端接口已经写好了："></a>之前后端接口已经写好了：</h5></li>
<li><h5 id="controller层-8"><a href="#controller层-8" class="headerlink" title="controller层"></a>controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 加入队伍</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> team    加入队伍参数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 加入队伍成功</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@PostMapping(&quot;/join&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">joinTeam</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> TeamJoin team, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// controller对参数的校验</span><br>       <span class="hljs-keyword">if</span> (team == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>       <span class="hljs-type">String</span> <span class="hljs-variable">joinTeam</span> <span class="hljs-operator">=</span> teamService.joinTeam(team, request);<br>       <span class="hljs-keyword">return</span> ResultUtils.success(joinTeam);<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="service层-7"><a href="#service层-7" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 加入队伍</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> team    加入队伍参数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 加入队伍成功</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Transactional</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> String <span class="hljs-title function_">joinTeam</span><span class="hljs-params">(TeamJoin team, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 1.登录校验</span><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br>       <span class="hljs-keyword">if</span> (loginUser == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_LOGIN);<br><br>       <span class="hljs-comment">// 2.校验队伍是否存在</span><br>       <span class="hljs-type">Long</span> <span class="hljs-variable">teamId</span> <span class="hljs-operator">=</span> team.getId();<br>       <span class="hljs-keyword">if</span> (teamId == <span class="hljs-literal">null</span> || teamId &lt; <span class="hljs-number">0</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR);<br><br>       <span class="hljs-type">Team</span> <span class="hljs-variable">currentTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getById(teamId);<br>       <span class="hljs-keyword">if</span> (currentTeam == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;该队伍不存在&quot;</span>);<br><br>       <span class="hljs-comment">// 3.校验状态</span><br>       <span class="hljs-type">Integer</span> <span class="hljs-variable">status</span> <span class="hljs-operator">=</span> team.getStatus();<br>       <span class="hljs-type">TeamStatusEnum</span> <span class="hljs-variable">statusEnum</span> <span class="hljs-operator">=</span> TeamStatusEnum.getEnumByValue(status);<br>       <span class="hljs-keyword">if</span> (statusEnum == <span class="hljs-literal">null</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;队伍状态不符合要求&quot;</span>);<br><br>       <span class="hljs-type">String</span> <span class="hljs-variable">password</span> <span class="hljs-operator">=</span> team.getPassword();<br>       <span class="hljs-comment">// 4.1.加入加密队伍必须输入密码</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isBlank(password) || password.length() &gt; <span class="hljs-number">32</span>)<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;加入加密队伍要提供正确的密码&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 4.2.加入公开队伍不需要密码用户加入公开队伍不需要密码</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.PUBLIC.equals(statusEnum)) &#123;<br>           <span class="hljs-keyword">if</span> (StringUtils.isNotBlank(password))<br>               <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;加入公开队伍无需密码&quot;</span>);<br>       &#125;<br><br>       <span class="hljs-comment">// 4.3.不能加入私有队伍</span><br>       <span class="hljs-keyword">if</span> (TeamStatusEnum.PRIVATE.equals(statusEnum))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;不能主动加入私有队伍&quot;</span>);<br><br>       <span class="hljs-comment">// 5.最多加入5个队伍</span><br>       QueryWrapper&lt;UserTeam&gt; utqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>       <span class="hljs-type">Long</span> <span class="hljs-variable">userId</span> <span class="hljs-operator">=</span> loginUser.getId();<br>       utqw.eq(<span class="hljs-string">&quot;user_id&quot;</span>, userId);<br>       <span class="hljs-type">long</span> <span class="hljs-variable">count</span> <span class="hljs-operator">=</span> userTeamService.count(utqw);<br>       <span class="hljs-keyword">if</span> (count &gt;= <span class="hljs-number">5</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;该用户加入队伍已达上限&quot;</span>);<br><br>       <span class="hljs-comment">// 6.不能重复加入已加入的队伍</span><br>       utqw.eq(<span class="hljs-string">&quot;team_id&quot;</span>, team.getId());<br>       count = userTeamService.count(utqw);<br>       <span class="hljs-keyword">if</span> (count &gt; <span class="hljs-number">0</span>)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;您已在该队伍中&quot;</span>);<br><br>       <span class="hljs-comment">// 7.不能加入满员的队伍</span><br>       <span class="hljs-type">Integer</span> <span class="hljs-variable">joinNum</span> <span class="hljs-operator">=</span> team.getJoinNum();<br>       <span class="hljs-keyword">if</span> (joinNum &gt;= team.getMaxNum())<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;该队伍已满员&quot;</span>);<br><br>       <span class="hljs-comment">// 8.更新team表队伍成员数量</span><br>       UpdateWrapper&lt;Team&gt; tuw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">UpdateWrapper</span>&lt;&gt;();<br>       tuw.eq(<span class="hljs-string">&quot;id&quot;</span>, teamId).set(<span class="hljs-string">&quot;join_num&quot;</span>, ++joinNum);<br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">updateTeam</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.update(tuw);<br><br>       <span class="hljs-comment">// 9.插入用户-队伍关系到user_team表</span><br>       <span class="hljs-type">UserTeam</span> <span class="hljs-variable">userTeam</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">UserTeam</span>();<br>       userTeam.setUserId(userId);<br>       userTeam.setTeamId(teamId);<br>       userTeam.setJoinTime(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>());<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">saveUserTeam</span> <span class="hljs-operator">=</span> userTeamService.save(userTeam);<br><br>       <span class="hljs-keyword">if</span> (!updateTeam || !saveUserTeam)<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;用户加入队伍失败&quot;</span>);<br><br>       <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;加入队伍成功&quot;</span>;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="快速开发前端页面："><a href="#快速开发前端页面：" class="headerlink" title="快速开发前端页面："></a>快速开发前端页面：</h5></li>
<li><h5 id="挂个按钮，再携带参数发送个toJoinTeam请求"><a href="#挂个按钮，再携带参数发送个toJoinTeam请求" class="headerlink" title="挂个按钮，再携带参数发送个toJoinTeam请求"></a>挂个按钮，再携带参数发送个toJoinTeam请求</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-button size=&quot;mini&quot; type=&quot;success&quot; @click=&quot;toJoinTeam(team)&quot;&gt;<br>       申请加入<br>     &lt;/van-button&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 申请加入队伍</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">toJoinTeam</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">team: <span class="hljs-built_in">any</span></span>) =&gt; &#123;<br>  <span class="hljs-comment">// 发送请求, 获取用户数据列表</span><br>  <span class="hljs-keyword">const</span> joinTeam = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/join&quot;</span>, &#123;<br>      <span class="hljs-attr">id</span>: team.<span class="hljs-property">id</span>,<br>      <span class="hljs-attr">userId</span>: team.<span class="hljs-property">userId</span>,<br>      <span class="hljs-attr">maxNum</span>: team.<span class="hljs-property">maxNum</span>,<br>      <span class="hljs-attr">status</span>: team.<span class="hljs-property">status</span>,<br>      <span class="hljs-attr">password</span>: team.<span class="hljs-property">password</span>,<br>      <span class="hljs-attr">joinNum</span>: team.<span class="hljs-property">joinNum</span>,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;加入队伍: = &quot;</span> + response.<span class="hljs-property">data</span>);<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br>  <span class="hljs-comment">// 成功加入队伍</span><br>  <span class="hljs-keyword">if</span> (joinTeam) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">`joinTeam`</span>);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(joinTeam);<br>  &#125;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="那我们在搜索页面里找个队伍，申请加入吧"><a href="#那我们在搜索页面里找个队伍，申请加入吧" class="headerlink" title="那我们在搜索页面里找个队伍，申请加入吧"></a>那我们在搜索页面里找个队伍，申请加入吧</h5></li>
</ul>
<h3 id="搜索队伍优化"><a href="#搜索队伍优化" class="headerlink" title="搜索队伍优化"></a>搜索队伍优化</h3><ul>
<li><h5 id="这边发现按照队伍最大人数来筛选队伍时，后端逻辑校验有问题：本意是查询-gt-最小人数的队伍，但写成了："><a href="#这边发现按照队伍最大人数来筛选队伍时，后端逻辑校验有问题：本意是查询-gt-最小人数的队伍，但写成了：" class="headerlink" title="这边发现按照队伍最大人数来筛选队伍时，后端逻辑校验有问题：本意是查询&gt;=最小人数的队伍，但写成了："></a>这边发现按照队伍最大人数来筛选队伍时，后端逻辑校验有问题：本意是查询&gt;=最小人数的队伍，但写成了：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 4.根据最大人数查询</span><br><span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br><span class="hljs-keyword">if</span> (maxNum &gt;= <span class="hljs-number">3</span> &amp;&amp; maxNum &lt;= <span class="hljs-number">20</span>)<br>	tqw.gt(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum).eq(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="显然有问题的，查询逻辑加个or就行了："><a href="#显然有问题的，查询逻辑加个or就行了：" class="headerlink" title="显然有问题的，查询逻辑加个or就行了："></a>显然有问题的，查询逻辑加个or就行了：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 4.根据最大人数查询</span><br><span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br><span class="hljs-keyword">if</span> (maxNum &gt;= <span class="hljs-number">3</span> &amp;&amp; maxNum &lt;= <span class="hljs-number">20</span>)<br>	tqw.gt(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum).or().eq(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum);<br></code></pre></td></tr></table></figure>

<h3 id="退出队伍优化"><a href="#退出队伍优化" class="headerlink" title="退出队伍优化"></a>退出队伍优化</h3><ul>
<li><h5 id="点击申请加入，可以正常加入公开队伍了，但是这边发现退出队伍时，没有正常删除user-team记录，这里捋一下退出队伍的逻辑吧："><a href="#点击申请加入，可以正常加入公开队伍了，但是这边发现退出队伍时，没有正常删除user-team记录，这里捋一下退出队伍的逻辑吧：" class="headerlink" title="点击申请加入，可以正常加入公开队伍了，但是这边发现退出队伍时，没有正常删除user_team记录，这里捋一下退出队伍的逻辑吧："></a>点击申请加入，可以正常加入公开队伍了，但是这边发现退出队伍时，没有正常删除user_team记录，这里捋一下退出队伍的逻辑吧：</h5></li>
</ul>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs clean">退出队伍 -&gt; 校验队伍剩余人数 -&gt; 退出后为空？-&gt; 删除user_team记录，删除team记录<br>									 -&gt; 仅删除user_team记录 -&gt; 是否为队长？-&gt; 是，传位队长给队员<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在判断退出后不为空后没有删除user-team记录，导致调试时出现问题了"><a href="#在判断退出后不为空后没有删除user-team记录，导致调试时出现问题了" class="headerlink" title="在判断退出后不为空后没有删除user_team记录，导致调试时出现问题了"></a>在判断退出后不为空后没有删除user_team记录，导致调试时出现问题了</h5></li>
<li><h5 id="优化完成"><a href="#优化完成" class="headerlink" title="优化完成"></a>优化完成</h5></li>
</ul>
<h3 id="搜索队伍优化2-0"><a href="#搜索队伍优化2-0" class="headerlink" title="搜索队伍优化2.0"></a>搜索队伍优化2.0</h3><ul>
<li><h5 id="我们要在搜索页面根据公开-加密分页展示两类队伍，再从中筛选所需队伍"><a href="#我们要在搜索页面根据公开-加密分页展示两类队伍，再从中筛选所需队伍" class="headerlink" title="我们要在搜索页面根据公开/加密分页展示两类队伍，再从中筛选所需队伍"></a>我们要在搜索页面根据公开/加密分页展示两类队伍，再从中筛选所需队伍</h5></li>
<li><h5 id="首先我们使用-Tab标签页-组件，把队伍列表表单分为公开和加密两页"><a href="#首先我们使用-Tab标签页-组件，把队伍列表表单分为公开和加密两页" class="headerlink" title="首先我们使用 Tab标签页 组件，把队伍列表表单分为公开和加密两页"></a>首先我们使用 Tab标签页 组件，把队伍列表表单分为公开和加密两页</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-divider content-position=&quot;left&quot;&gt;符合条件的队伍&lt;/van-divider&gt;<br><br>  &lt;!-- 队伍列表分页展示 --&gt;<br>  &lt;van-tabs v-model:active=&quot;active&quot;&gt;<br>    &lt;!-- 公开队伍列表 --&gt;<br>    &lt;van-tab title=&quot;公开&quot; style=&quot;padding-bottom: 57px&quot;&gt;<br>      &lt;van-card<br>        v-if=&quot;pubTeamList&quot;<br>        v-for=&quot;team in pubTeamList&quot;<br>        :tag=&quot;getTeamStatus(team.status)&quot;<br>        :title=&quot;team.name&quot;<br>        :desc=&quot;team.description&quot;<br>        thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>      &gt;<br>        &lt;template #bottom&gt;<br>          &lt;div&gt;队伍人数: &#123;&#123; team.joinNum &#125;&#125;/ &#123;&#123; team.maxNum &#125;&#125;&lt;/div&gt;<br>          &lt;div&gt;创建时间: &#123;&#123; team.createTime &#125;&#125;&lt;/div&gt;<br>          &lt;div&gt;解散时间: &#123;&#123; team.expireTime &#125;&#125;&lt;/div&gt;<br>        &lt;/template&gt;<br><br>        &lt;template #footer&gt;<br>          &lt;van-button size=&quot;mini&quot; type=&quot;success&quot; @click=&quot;toJoinTeam(team)&quot;&gt;<br>            申请加入<br>          &lt;/van-button&gt;<br>          &lt;van-button size=&quot;mini&quot; type=&quot;primary&quot; @click=&quot;&quot;&gt;<br>            详细信息<br>          &lt;/van-button&gt;<br>        &lt;/template&gt;<br>      &lt;/van-card&gt;<br>      &lt;!-- 无队伍信息展示 --&gt;<br>      &lt;van-empty v-if=&quot;!pubTeamList&quot; description=&quot;公开队伍为空&quot; /&gt;<br>    &lt;/van-tab&gt;<br><br>    &lt;!-- 加密队伍列表 --&gt;<br>    &lt;van-tab title=&quot;加密&quot; style=&quot;padding-bottom: 57px&quot;&gt;<br>      &lt;van-card<br>        v-if=&quot;safeTeamList&quot;<br>        v-for=&quot;team in safeTeamList&quot;<br>        :tag=&quot;getTeamStatus(team.status)&quot;<br>        :title=&quot;team.name&quot;<br>        :desc=&quot;team.description&quot;<br>        thumb=&quot;https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg&quot;<br>      &gt;<br>        &lt;template #bottom&gt;<br>          &lt;div&gt;队伍人数: &#123;&#123; team.joinNum &#125;&#125;/ &#123;&#123; team.maxNum &#125;&#125;&lt;/div&gt;<br>          &lt;div&gt;创建时间: &#123;&#123; team.createTime &#125;&#125;&lt;/div&gt;<br>          &lt;div&gt;解散时间: &#123;&#123; team.expireTime &#125;&#125;&lt;/div&gt;<br>        &lt;/template&gt;<br><br>        &lt;template #footer&gt;<br>          &lt;van-button size=&quot;mini&quot; type=&quot;success&quot; @click=&quot;toJoinTeam(team)&quot;&gt;<br>            申请加入<br>          &lt;/van-button&gt;<br>          &lt;van-button size=&quot;mini&quot; type=&quot;primary&quot; @click=&quot;&quot;&gt;<br>            详细信息<br>          &lt;/van-button&gt;<br>        &lt;/template&gt;<br>      &lt;/van-card&gt;<br>      &lt;!-- 无队伍信息展示 --&gt;<br>      &lt;van-empty v-if=&quot;!safeTeamList&quot; description=&quot;加密队伍为空&quot; /&gt;<br>    &lt;/van-tab&gt;<br>  &lt;/van-tabs&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 标签页-激活</span><br><span class="hljs-keyword">const</span> active = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="进入搜索页就按队伍状态-status：0-和-status：2-发两次请求，并将响应绑定到对应表单上"><a href="#进入搜索页就按队伍状态-status：0-和-status：2-发两次请求，并将响应绑定到对应表单上" class="headerlink" title="进入搜索页就按队伍状态 status：0 和 status：2 发两次请求，并将响应绑定到对应表单上"></a>进入搜索页就按队伍状态 status：0 和 status：2 发两次请求，并将响应绑定到对应表单上</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 公开队伍列表</span><br><span class="hljs-keyword">const</span> pubTeamList = <span class="hljs-title function_">ref</span>([]);<br><span class="hljs-comment">// 加密队伍列表</span><br><span class="hljs-keyword">const</span> safeTeamList = <span class="hljs-title function_">ref</span>([]);<br><span class="hljs-comment">// 钩子函数 - 加载所有队伍信息</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;active = &quot;</span> + active.<span class="hljs-property">value</span>);<br>  <span class="hljs-comment">// 公开队伍列表</span><br>  <span class="hljs-keyword">const</span> teamListData1 = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/list/page&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">name</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">name</span>,<br>        <span class="hljs-attr">description</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">description</span>,<br>        <span class="hljs-attr">maxNum</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">maxNum</span>,<br>        <span class="hljs-attr">userId</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">userId</span>,<br>        <span class="hljs-attr">status</span>: <span class="hljs-number">0</span>,<br>      &#125;,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-keyword">return</span> response?.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-comment">// 加密队伍列表</span><br>  <span class="hljs-keyword">const</span> teamListData2 = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/list/page&quot;</span>, &#123;<br>      <span class="hljs-attr">params</span>: &#123;<br>        <span class="hljs-attr">name</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">name</span>,<br>        <span class="hljs-attr">description</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">description</span>,<br>        <span class="hljs-attr">maxNum</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">maxNum</span>,<br>        <span class="hljs-attr">userId</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">userId</span>,<br>        <span class="hljs-attr">status</span>: <span class="hljs-number">2</span>,<br>      &#125;,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-keyword">return</span> response?.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-comment">// 拿取公开队伍列表</span><br>  pubTeamList.<span class="hljs-property">value</span> = teamListData1;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(pubTeamList.<span class="hljs-property">value</span>);<br>  <span class="hljs-comment">// 拿取加密队伍列表</span><br>  safeTeamList.<span class="hljs-property">value</span> = teamListData2;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(safeTeamList.<span class="hljs-property">value</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="当然，我们可以再次使用onSearchTeam来根据搜索表单筛选队伍，分两种情况："><a href="#当然，我们可以再次使用onSearchTeam来根据搜索表单筛选队伍，分两种情况：" class="headerlink" title="当然，我们可以再次使用onSearchTeam来根据搜索表单筛选队伍，分两种情况："></a>当然，我们可以再次使用onSearchTeam来根据搜索表单筛选队伍，分两种情况：</h5></li>
<li><h5 id="公开页激活（active-value-0）和加密页激活（active-value-1）"><a href="#公开页激活（active-value-0）和加密页激活（active-value-1）" class="headerlink" title="公开页激活（active.value === 0）和加密页激活（active.value === 1）"></a>公开页激活（active.value === 0）和加密页激活（active.value === 1）</h5></li>
<li><h5 id="根据页面激活情况发送相应请求即可，并将结果绑定到对应表单上"><a href="#根据页面激活情况发送相应请求即可，并将结果绑定到对应表单上" class="headerlink" title="根据页面激活情况发送相应请求即可，并将结果绑定到对应表单上"></a>根据页面激活情况发送相应请求即可，并将结果绑定到对应表单上</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 搜索队伍</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onSearchTeam</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">let</span> teamListData;<br>  <span class="hljs-keyword">if</span> (active.<span class="hljs-property">value</span> === <span class="hljs-number">0</span>) &#123;<br>    teamListData = <span class="hljs-keyword">await</span> myAxios<br>      .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/list/page&quot;</span>, &#123;<br>        <span class="hljs-attr">params</span>: &#123;<br>          <span class="hljs-attr">name</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">name</span>,<br>          <span class="hljs-attr">description</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">description</span>,<br>          <span class="hljs-attr">maxNum</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">maxNum</span>,<br>          <span class="hljs-attr">userId</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">userId</span>,<br>          <span class="hljs-attr">status</span>: <span class="hljs-number">0</span>,<br>        &#125;,<br>      &#125;)<br>      <span class="hljs-comment">// 响应</span><br>      .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>        <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>        <span class="hljs-keyword">return</span> response?.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>;<br>      &#125;)<br>      <span class="hljs-comment">// 抛异常</span><br>      .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>      &#125;);<br>    <span class="hljs-comment">// 拿取公开队伍列表</span><br>    pubTeamList.<span class="hljs-property">value</span> = teamListData;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(pubTeamList.<span class="hljs-property">value</span>);<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    teamListData = <span class="hljs-keyword">await</span> myAxios<br>      .<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/list/page&quot;</span>, &#123;<br>        <span class="hljs-attr">params</span>: &#123;<br>          <span class="hljs-attr">name</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">name</span>,<br>          <span class="hljs-attr">description</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">description</span>,<br>          <span class="hljs-attr">maxNum</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">maxNum</span>,<br>          <span class="hljs-attr">userId</span>: searchItem.<span class="hljs-property">value</span>.<span class="hljs-property">userId</span>,<br>          <span class="hljs-attr">status</span>: <span class="hljs-number">2</span>,<br>        &#125;,<br>      &#125;)<br>      <span class="hljs-comment">// 响应</span><br>      .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>        <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>        <span class="hljs-keyword">return</span> response?.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>;<br>      &#125;)<br>      <span class="hljs-comment">// 抛异常</span><br>      .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>      &#125;);<br>    <span class="hljs-comment">// 拿取队伍列表</span><br>    safeTeamList.<span class="hljs-property">value</span> = teamListData;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(safeTeamList.<span class="hljs-property">value</span>);<br>  &#125;<br><br>  <span class="hljs-comment">// 拿取队伍列表</span><br>  safeTeamList.<span class="hljs-property">value</span> = teamListData;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(safeTeamList.<span class="hljs-property">value</span>);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="编写完成！效果如下："><a href="#编写完成！效果如下：" class="headerlink" title="编写完成！效果如下："></a>编写完成！效果如下：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230529233029591.png" alt="image-20230529233029591">s</p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230529233050906.png" alt="image-20230529233050906"></p>
<ul>
<li><h5 id="这里我们发现搜索队伍后端逻辑校验有问题："><a href="#这里我们发现搜索队伍后端逻辑校验有问题：" class="headerlink" title="这里我们发现搜索队伍后端逻辑校验有问题："></a>这里我们发现搜索队伍后端逻辑校验有问题：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 5.根据最大人数查询</span><br><span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br><span class="hljs-keyword">if</span> (maxNum &gt;= <span class="hljs-number">2</span> &amp;&amp; maxNum &lt;= <span class="hljs-number">20</span>)<br>	tqw.gt(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum).or().eq(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="我们之前是这样实现的，本意是想筛选出-gt-maxNum的队伍，但MP的每个QueryWrapper后紧跟条件时，会自动使用and来拼接（懂吧，就是SQL中的where语句下的and拼接条件）。当最大人数筛选条件正确填写时，执行情况为：把-or-前的所有条件和-or-后的-eq-“max-num”-maxNum-条件用or连接去查询，结果显然不对，查到了多于预期的数据。"><a href="#我们之前是这样实现的，本意是想筛选出-gt-maxNum的队伍，但MP的每个QueryWrapper后紧跟条件时，会自动使用and来拼接（懂吧，就是SQL中的where语句下的and拼接条件）。当最大人数筛选条件正确填写时，执行情况为：把-or-前的所有条件和-or-后的-eq-“max-num”-maxNum-条件用or连接去查询，结果显然不对，查到了多于预期的数据。" class="headerlink" title="我们之前是这样实现的，本意是想筛选出&gt;=maxNum的队伍，但MP的每个QueryWrapper后紧跟条件时，会自动使用and来拼接（懂吧，就是SQL中的where语句下的and拼接条件）。当最大人数筛选条件正确填写时，执行情况为：把.or()前的所有条件和.or()后的.eq(“max_num”, maxNum)条件用or连接去查询，结果显然不对，查到了多于预期的数据。"></a>我们之前是这样实现的，本意是想筛选出&gt;=maxNum的队伍，但MP的每个QueryWrapper后紧跟条件时，会自动使用and来拼接（懂吧，就是SQL中的where语句下的and拼接条件）。当最大人数筛选条件正确填写时，执行情况为：把.or()前的所有条件和.or()后的.eq(“max_num”, maxNum)条件用or连接去查询，结果显然不对，查到了多于预期的数据。</h5></li>
<li><h5 id="那为了实现查询-gt-maxNum的队伍，我们舍弃了-eq，把maxNum-1就行了，逻辑上没有问题了"><a href="#那为了实现查询-gt-maxNum的队伍，我们舍弃了-eq，把maxNum-1就行了，逻辑上没有问题了" class="headerlink" title="那为了实现查询&gt;=maxNum的队伍，我们舍弃了.eq，把maxNum + 1就行了，逻辑上没有问题了"></a>那为了实现查询&gt;=maxNum的队伍，我们舍弃了.eq，把maxNum + 1就行了，逻辑上没有问题了</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 5.根据最大人数查询</span><br><span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br><span class="hljs-keyword">if</span> (maxNum &gt;= <span class="hljs-number">2</span> &amp;&amp; maxNum &lt;= <span class="hljs-number">20</span>)<br>	tqw.gt(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum - <span class="hljs-number">1</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="今天就做到这里，明天继续！（2023-05-29晚）"><a href="#今天就做到这里，明天继续！（2023-05-29晚）" class="headerlink" title="今天就做到这里，明天继续！（2023/05/29晚）"></a>今天就做到这里，明天继续！（2023/05/29晚）</h5></li>
</ul>
<h3 id="搜索队伍优化3-0"><a href="#搜索队伍优化3-0" class="headerlink" title="搜索队伍优化3.0"></a>搜索队伍优化3.0</h3><ul>
<li><h5 id="搜索到的队伍不包含用户已加入的队伍（当然如果重复加入队伍，我们也是有逻辑校验的）"><a href="#搜索到的队伍不包含用户已加入的队伍（当然如果重复加入队伍，我们也是有逻辑校验的）" class="headerlink" title="搜索到的队伍不包含用户已加入的队伍（当然如果重复加入队伍，我们也是有逻辑校验的）"></a>搜索到的队伍不包含用户已加入的队伍（当然如果重复加入队伍，我们也是有逻辑校验的）</h5></li>
<li><h5 id="添加后端逻辑即可，代码如下："><a href="#添加后端逻辑即可，代码如下：" class="headerlink" title="添加后端逻辑即可，代码如下："></a>添加后端逻辑即可，代码如下：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 6.排除当前用户已加入的队伍</span><br>QueryWrapper&lt;UserTeam&gt; utqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br><span class="hljs-comment">// 6.1.查询当前用户已加入的队伍信息(为提高性能, 仅拿取需要的team_id字段即可)</span><br>utqw.select(<span class="hljs-string">&quot;team_id&quot;</span>).eq(<span class="hljs-string">&quot;user_id&quot;</span>, loginUser.getId());<br>List&lt;UserTeam&gt; userTeamList = userTeamService.list(utqw);<br><span class="hljs-comment">// 6.2.队伍列表排除掉用户已加入的队伍</span><br>List&lt;Long&gt; teamIdList = userTeamList.stream().map(UserTeam::getTeamId).collect(Collectors.toList());<br>tqw.notIn(<span class="hljs-string">&quot;id&quot;</span>, teamIdList);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="现在大厅中就bu显示用户已加入的队伍了，美滋滋-（2023-05-31下午）"><a href="#现在大厅中就bu显示用户已加入的队伍了，美滋滋-（2023-05-31下午）" class="headerlink" title="现在大厅中就bu显示用户已加入的队伍了，美滋滋~（2023/05/31下午）"></a>现在大厅中就bu显示用户已加入的队伍了，美滋滋~（2023/05/31下午）</h5></li>
</ul>
<h3 id="加入队伍优化"><a href="#加入队伍优化" class="headerlink" title="加入队伍优化"></a>加入队伍优化</h3><ul>
<li><h5 id="他妈的好多东西，明天再做吧嘿嘿嘿"><a href="#他妈的好多东西，明天再做吧嘿嘿嘿" class="headerlink" title="他妈的好多东西，明天再做吧嘿嘿嘿"></a>他妈的好多东西，明天再做吧嘿嘿嘿</h5></li>
<li><h5 id="实现申请加入加密队伍时，需要填写密码"><a href="#实现申请加入加密队伍时，需要填写密码" class="headerlink" title="实现申请加入加密队伍时，需要填写密码"></a>实现申请加入加密队伍时，需要填写密码</h5></li>
<li><h5 id="这个功能基本实现了，但发现目前后端仅校验password的格式，并没有校验其正确与否，待明日优化完毕这个逻辑后再作记录吧（2023-05-31晚）"><a href="#这个功能基本实现了，但发现目前后端仅校验password的格式，并没有校验其正确与否，待明日优化完毕这个逻辑后再作记录吧（2023-05-31晚）" class="headerlink" title="这个功能基本实现了，但发现目前后端仅校验password的格式，并没有校验其正确与否，待明日优化完毕这个逻辑后再作记录吧（2023/05/31晚）"></a>这个功能基本实现了，但发现目前后端仅校验password的格式，并没有校验其正确与否，待明日优化完毕这个逻辑后再作记录吧（2023/05/31晚）</h5></li>
</ul>
<figure class="highlight fortran"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs fortran">const joinTeam = await myAxios<br>   .post(<span class="hljs-string">&quot;/team/join&quot;</span>, &#123;<br>     id: <span class="hljs-built_in">team</span>.id,<br>     userId: <span class="hljs-built_in">team</span>.userId,<br>     maxNum: <span class="hljs-built_in">team</span>.maxNum,<br>     password: <span class="hljs-built_in">team</span>.password,<br>     joinNum: <span class="hljs-built_in">team</span>.joinNum,<br>     <span class="hljs-keyword">status</span>: <span class="hljs-built_in">team</span>.<span class="hljs-keyword">status</span>,<br>   &#125;)<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="我们边分析逻辑，边作相应的代码展示："><a href="#我们边分析逻辑，边作相应的代码展示：" class="headerlink" title="我们边分析逻辑，边作相应的代码展示："></a>我们边分析逻辑，边作相应的代码展示：</h5></li>
<li><h5 id="在加密队伍列表下，点击申请加入后，首先弹出对话框，并要求填写队伍密码"><a href="#在加密队伍列表下，点击申请加入后，首先弹出对话框，并要求填写队伍密码" class="headerlink" title="在加密队伍列表下，点击申请加入后，首先弹出对话框，并要求填写队伍密码"></a>在加密队伍列表下，点击申请加入后，首先弹出对话框，并要求填写队伍密码</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template #footer&gt;<br>          &lt;van-button size=&quot;mini&quot; type=&quot;success&quot; @click=&quot;preJoinTeam(team)&quot;&gt;<br>            申请加入<br>          &lt;/van-button&gt;<br>          &lt;van-button size=&quot;mini&quot; type=&quot;primary&quot; @click=&quot;&quot;&gt;<br>            详细信息<br>          &lt;/van-button&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 密码对话框 --&gt;<br>  &lt;van-dialog<br>    v-model:show=&quot;show&quot;<br>    title=&quot;提示&quot;<br>    show-cancel-button<br>    @confirm=&quot;toJoinTeam(joinTeamParam, password)&quot;<br>    @cancel=&quot;cancelJoin&quot;<br>  &gt;<br>    &lt;van-field v-model=&quot;password&quot; placeholder=&quot;请输入密码&quot;&gt; &lt;/van-field&gt;<br>  &lt;/van-dialog&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 加入队伍参数</span><br><span class="hljs-keyword">const</span> joinTeamParam = <span class="hljs-title function_">ref</span>(&#123;&#125;);<br><span class="hljs-comment">// 队伍密码</span><br><span class="hljs-keyword">const</span> password = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 密码对话框</span><br><span class="hljs-keyword">const</span> show = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 弹出对话框 封装队伍信息</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">preJoinTeam</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">team: <span class="hljs-built_in">any</span></span>) =&gt; &#123;<br>  show.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>;<br>  joinTeamParam.<span class="hljs-property">value</span> = team;<br>&#125;;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 确定 申请加入队伍</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">toJoinTeam</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">team: <span class="hljs-built_in">any</span>, password: <span class="hljs-built_in">any</span></span>) =&gt; &#123;<br>  <span class="hljs-comment">// on confirm</span><br>  <span class="hljs-comment">// 发送请求, 获取用户数据列表</span><br>  <span class="hljs-keyword">const</span> joinTeam = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/team/join&quot;</span>, &#123;<br>      <span class="hljs-attr">id</span>: team.<span class="hljs-property">id</span>,<br>      <span class="hljs-attr">userId</span>: team.<span class="hljs-property">userId</span>,<br>      <span class="hljs-attr">maxNum</span>: team.<span class="hljs-property">maxNum</span>,<br>      <span class="hljs-attr">joinNum</span>: team.<span class="hljs-property">joinNum</span>,<br>      <span class="hljs-attr">status</span>: team.<span class="hljs-property">status</span>,<br>      <span class="hljs-attr">password</span>: password,<br>    &#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;加入队伍: = &quot;</span> + response.<span class="hljs-property">data</span>);<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br>  <span class="hljs-comment">// 成功加入队伍</span><br>  <span class="hljs-keyword">if</span> (joinTeam) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">`joinTeam`</span>);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(joinTeam);<br>  &#125;<br>&#125;;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 取消 清空密码槽 关闭对话框</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">cancelJoin</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  password.<span class="hljs-property">value</span> = <span class="hljs-string">&quot;&quot;</span>;<br>  show.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="前端就是这样，这边优化一下后端的密码校验"><a href="#前端就是这样，这边优化一下后端的密码校验" class="headerlink" title="前端就是这样，这边优化一下后端的密码校验"></a>前端就是这样，这边优化一下后端的密码校验</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 4.加入加密队伍必须输入密码且必须是正确的密码</span><br>        <span class="hljs-keyword">if</span> (TeamStatusEnum.SECRET.equals(statusEnum)) &#123;<br>            <span class="hljs-comment">// 4.1.查询所加队伍的password, 并判断输入的密码是否正确</span><br>            QueryWrapper&lt;Team&gt; tqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>            tqw.select(<span class="hljs-string">&quot;password&quot;</span>);<br>            <span class="hljs-type">String</span> <span class="hljs-variable">password</span> <span class="hljs-operator">=</span> team.getPassword();<br><br>            <span class="hljs-keyword">if</span> (StringUtils.isBlank(password) || password.length() &gt; <span class="hljs-number">32</span>)<br>                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARMS_ERROR, <span class="hljs-string">&quot;加入加密队伍要提供正确的密码&quot;</span>);<br><br>            <span class="hljs-keyword">if</span> (!password.equals(<span class="hljs-built_in">this</span>.getById(teamId).getPassword()))<br>                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR, <span class="hljs-string">&quot;输入的密码不正确&quot;</span>);<br>        &#125;     <br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="ok，优化完毕，加密队伍必须正确输入密码才能加入了。看一下效果：（2023-06-02）"><a href="#ok，优化完毕，加密队伍必须正确输入密码才能加入了。看一下效果：（2023-06-02）" class="headerlink" title="ok，优化完毕，加密队伍必须正确输入密码才能加入了。看一下效果：（2023/06/02）"></a>ok，优化完毕，加密队伍必须正确输入密码才能加入了。看一下效果：（2023/06/02）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230602162748112.png" alt="image-20230602162748112"></p>
<h3 id="分页查询队伍优化"><a href="#分页查询队伍优化" class="headerlink" title="分页查询队伍优化"></a>分页查询队伍优化</h3><ul>
<li><h5 id="拿到加入队伍的所有队员的信息（2023-05-28）"><a href="#拿到加入队伍的所有队员的信息（2023-05-28）" class="headerlink" title="拿到加入队伍的所有队员的信息（2023/05/28）"></a>拿到加入队伍的所有队员的信息（2023/05/28）</h5></li>
</ul>
<h3 id="主页优化"><a href="#主页优化" class="headerlink" title="主页优化"></a>主页优化</h3><ul>
<li><h5 id="之前写匹配用户时，请求-user-match是粘贴请求-user-recommend的，导致把这些代码也粘进来了："><a href="#之前写匹配用户时，请求-user-match是粘贴请求-user-recommend的，导致把这些代码也粘进来了：" class="headerlink" title="之前写匹配用户时，请求/user/match是粘贴请求/user/recommend的，导致把这些代码也粘进来了："></a>之前写匹配用户时，请求/user/match是粘贴请求/user/recommend的，导致把这些代码也粘进来了：</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 响应</span><br>   .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>     <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>);<br>     total = response.<span class="hljs-property">data</span>.<span class="hljs-property">total</span>;<br>     pageSize = response.<span class="hljs-property">data</span>.<span class="hljs-property">size</span>;<br>     <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>;<br>   &#125;)<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="怪不得每次开启匹配用户后，底边的分页条出问题了"><a href="#怪不得每次开启匹配用户后，底边的分页条出问题了" class="headerlink" title="怪不得每次开启匹配用户后，底边的分页条出问题了"></a>怪不得每次开启匹配用户后，底边的分页条出问题了</h5></li>
<li><h5 id="完美解决！"><a href="#完美解决！" class="headerlink" title="完美解决！"></a>完美解决！</h5></li>
</ul>
<h2 id="阶段性问题-11"><a href="#阶段性问题-11" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="前两天给GiHub仓库上推送用户中心和伙伴匹配时，由于近期没有按时推送项目到Gitee上，操作的时候不小心把Gitee上的旧代码拉到本地了。最要命的是，还他妈把本地项目给覆盖了，还好一查发现GitHub仓库里的代码是最新的了，差点以为这几天白干了"><a href="#前两天给GiHub仓库上推送用户中心和伙伴匹配时，由于近期没有按时推送项目到Gitee上，操作的时候不小心把Gitee上的旧代码拉到本地了。最要命的是，还他妈把本地项目给覆盖了，还好一查发现GitHub仓库里的代码是最新的了，差点以为这几天白干了" class="headerlink" title="前两天给GiHub仓库上推送用户中心和伙伴匹配时，由于近期没有按时推送项目到Gitee上，操作的时候不小心把Gitee上的旧代码拉到本地了。最要命的是，还他妈把本地项目给覆盖了，还好一查发现GitHub仓库里的代码是最新的了，差点以为这几天白干了"></a>前两天给GiHub仓库上推送用户中心和伙伴匹配时，由于近期没有按时推送项目到Gitee上，操作的时候不小心把Gitee上的旧代码拉到本地了。最要命的是，还他妈把本地项目给覆盖了，还好一查发现GitHub仓库里的代码是最新的了，差点以为这几天白干了</h5></li>
<li><h5 id="以后更新项目要及时推送到Gitee和GitHub上（2023-06-08）"><a href="#以后更新项目要及时推送到Gitee和GitHub上（2023-06-08）" class="headerlink" title="以后更新项目要及时推送到Gitee和GitHub上（2023/06/08）"></a>以后更新项目要及时推送到Gitee和GitHub上（2023/06/08）</h5></li>
</ul>
<h3 id="定时查询任务优化"><a href="#定时查询任务优化" class="headerlink" title="定时查询任务优化"></a>定时查询任务优化</h3><ul>
<li><h5 id="给重点用户推荐用户：每天00-00定时缓存预热，并保存24小时（好像没啥卵用，给匹配相似用户加这个功能还不错）"><a href="#给重点用户推荐用户：每天00-00定时缓存预热，并保存24小时（好像没啥卵用，给匹配相似用户加这个功能还不错）" class="headerlink" title="给重点用户推荐用户：每天00:00定时缓存预热，并保存24小时（好像没啥卵用，给匹配相似用户加这个功能还不错）"></a>给重点用户推荐用户：每天00:00定时缓存预热，并保存24小时（好像没啥卵用，给匹配相似用户加这个功能还不错）</h5></li>
<li><h5 id="这个定时查询使用了redisson实现分布式锁，完成了多台服务器中只能有一台抢锁成功并缓存预热的功能，目前这个定时任务只是预热了重点用户的查询用户，用处不大，仅学习定时任务和分布式锁，将来优化（2023-06-08）"><a href="#这个定时查询使用了redisson实现分布式锁，完成了多台服务器中只能有一台抢锁成功并缓存预热的功能，目前这个定时任务只是预热了重点用户的查询用户，用处不大，仅学习定时任务和分布式锁，将来优化（2023-06-08）" class="headerlink" title="这个定时查询使用了redisson实现分布式锁，完成了多台服务器中只能有一台抢锁成功并缓存预热的功能，目前这个定时任务只是预热了重点用户的查询用户，用处不大，仅学习定时任务和分布式锁，将来优化（2023/06/08）"></a>这个定时查询使用了redisson实现分布式锁，完成了多台服务器中只能有一台抢锁成功并缓存预热的功能，目前这个定时任务只是预热了重点用户的查询用户，用处不大，仅学习定时任务和分布式锁，将来优化（2023/06/08）</h5></li>
</ul>
<h3 id="随机匹配优化2-0"><a href="#随机匹配优化2-0" class="headerlink" title="随机匹配优化2.0"></a>随机匹配优化2.0</h3><ul>
<li><h5 id="使用redis缓存（保存6-hour），减少查询数据库的次数，减小数据库压力"><a href="#使用redis缓存（保存6-hour），减少查询数据库的次数，减小数据库压力" class="headerlink" title="使用redis缓存（保存6 hour），减少查询数据库的次数，减小数据库压力"></a>使用redis缓存（保存6 hour），减少查询数据库的次数，减小数据库压力</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 用户匹配</span><br><span class="hljs-comment">   *</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> num     推荐/匹配数目</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> request request 获取登陆用户</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span> 匹配到的用户</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@Override</span><br>  <span class="hljs-keyword">public</span> List&lt;User&gt; <span class="hljs-title function_">matchUsers</span><span class="hljs-params">(<span class="hljs-type">long</span> num, HttpServletRequest request)</span> &#123;<br>      <span class="hljs-comment">// 1.获取登录用户标签(json字符串 -&gt; List列表)</span><br>      <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> getLoginUser(request);<br><br>      <span class="hljs-comment">// 拿到当前登录用户的key(每个用户都有各自对应的key)</span><br>      <span class="hljs-type">String</span> <span class="hljs-variable">redisKey</span> <span class="hljs-operator">=</span> String.format(<span class="hljs-string">&quot;memory:user:match:%s&quot;</span>, loginUser.getId());<br>      <span class="hljs-comment">// 查缓存</span><br>      List&lt;User&gt; userList = (List&lt;User&gt;) redisTemplate.opsForValue().get(redisKey);<br>      <span class="hljs-comment">// 缓存命中, 则返回用户信息</span><br>      <span class="hljs-keyword">if</span> (userList != <span class="hljs-literal">null</span>) &#123;<br>          <span class="hljs-keyword">return</span> userList;<br>      &#125;<br><br>      <span class="hljs-comment">// 缓存未命中, 查询数据库</span><br>      <span class="hljs-type">String</span> <span class="hljs-variable">tags</span> <span class="hljs-operator">=</span> loginUser.getTags();<br>      <span class="hljs-type">Gson</span> <span class="hljs-variable">gson</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>();<br>      List&lt;String&gt; tagList = gson.fromJson(tags, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeToken</span>&lt;List&lt;String&gt;&gt;() &#123;<br>      &#125;.getType());<br><br>      QueryWrapper&lt;User&gt; queryWrapper = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>      queryWrapper.isNotNull(<span class="hljs-string">&quot;tags&quot;</span>);<br>      queryWrapper.select(<span class="hljs-string">&quot;id&quot;</span>, <span class="hljs-string">&quot;tags&quot;</span>);<br>      <span class="hljs-comment">// 2.遍历所有查询到的用户, 依次进行标签比较, 并存储到容器中</span><br>      <span class="hljs-comment">// 2.1.查询到所有用户</span><br>      userList = <span class="hljs-built_in">this</span>.list(queryWrapper);<br>      <span class="hljs-comment">// 2.2.使用SortedMap容器</span><br>      List&lt;Pair&lt;User, Long&gt;&gt; userDistanceList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>      <span class="hljs-keyword">for</span> (User user : userList) &#123;<br>          <span class="hljs-comment">// 2.2.1.拿到用户</span><br>          <span class="hljs-comment">// 2.2.2.拿到其标签</span><br>          <span class="hljs-type">String</span> <span class="hljs-variable">userTags</span> <span class="hljs-operator">=</span> user.getTags();<br>          <span class="hljs-comment">// 2.2.3.无标签用户, 直接过滤, 匹配结果剔除自己</span><br>          <span class="hljs-keyword">if</span> (StringUtils.isBlank(userTags) || user.getId().equals(loginUser.getId())) &#123;<br>              <span class="hljs-keyword">continue</span>;<br>          &#125;<br>          <span class="hljs-comment">// 2.2.4.转换标签(json字符串 -&gt; List列表)</span><br>          List&lt;String&gt; userTagList = gson.fromJson(userTags, <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeToken</span>&lt;List&lt;String&gt;&gt;() &#123;<br>          &#125;.getType());<br>          <span class="hljs-comment">// 2.2.5.进行标签比较(编辑距离算法)</span><br>          <span class="hljs-type">long</span> <span class="hljs-variable">distance</span> <span class="hljs-operator">=</span> AlgorithmUtils.minDistance(tagList, userTagList);<br>          <span class="hljs-comment">// 2.2.6.将比较结果存入SortedMap容器中(存储了用户下标和匹配度, 并按distance升序排列)</span><br>          userDistanceList.add(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Pair</span>&lt;&gt;(user, distance));<br>      &#125;<br><br>      <span class="hljs-comment">// 3.按编辑距离由小到大排序</span><br>      List&lt;Pair&lt;User, Long&gt;&gt; sortedUserDistanceList = userDistanceList.stream()<br>              .sorted((a, b) -&gt; (<span class="hljs-type">int</span>) (a.getB() - b.getB()))<br>              .limit(num)<br>              .collect(Collectors.toList());<br><br>      <span class="hljs-comment">// 4.有顺序的userID列表</span><br>      List&lt;Long&gt; userIdList = sortedUserDistanceList.stream().map(pair -&gt; pair.getA().getId()).collect(Collectors.toList());<br><br>      <span class="hljs-comment">// 5.根据id查询user完整信息</span><br>      QueryWrapper&lt;User&gt; userQueryWrapper = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>      userQueryWrapper.in(<span class="hljs-string">&quot;id&quot;</span>, userIdList);<br>      Map&lt;Long, List&lt;User&gt;&gt; userIdUserListMap = <span class="hljs-built_in">this</span>.list(userQueryWrapper).stream()<br>              .map(<span class="hljs-built_in">this</span>::getSafetyUser)<br>              .collect(Collectors.groupingBy(User::getId));<br><br>      <span class="hljs-comment">// 6.因为上面查询打乱了顺序，这里根据上面有序的userId列表赋值</span><br>      List&lt;User&gt; finalUserList = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>      <span class="hljs-keyword">for</span> (Long userId : userIdList) &#123;<br>          finalUserList.add(userIdUserListMap.get(userId).get(<span class="hljs-number">0</span>));<br>      &#125;<br><br>      <span class="hljs-comment">// 将匹配到的用户信息写到缓存中</span><br>      <span class="hljs-keyword">try</span> &#123;<br>          redisTemplate.opsForValue().set(redisKey, finalUserList, <span class="hljs-number">6</span>, TimeUnit.HOURS);<br>      &#125; <span class="hljs-keyword">catch</span> (Exception e) &#123;<br>          log.error(<span class="hljs-string">&quot;redis set key error&quot;</span>, e);<br>      &#125;<br><br>      <span class="hljs-comment">// 7.返回匹配用户列表</span><br>      <span class="hljs-keyword">return</span> finalUserList;<br>  &#125;<br></code></pre></td></tr></table></figure>

<h3 id="TODO优化"><a href="#TODO优化" class="headerlink" title="TODO优化"></a>TODO优化</h3><ul>
<li><h5 id="后端日期传至前端变成一串数字的解决办法"><a href="#后端日期传至前端变成一串数字的解决办法" class="headerlink" title="后端日期传至前端变成一串数字的解决办法"></a>后端日期传至前端变成一串数字的解决办法</h5></li>
<li><h5 id="实体属性前添加注解即可："><a href="#实体属性前添加注解即可：" class="headerlink" title="实体属性前添加注解即可："></a>实体属性前添加注解即可：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@JsonFormat(pattern=&quot;yyyy-MM-dd HH:mm:ss&quot;,timezone = &quot;GMT+8&quot;)</span><br></code></pre></td></tr></table></figure>

<h3 id="搜索队伍优化4-0"><a href="#搜索队伍优化4-0" class="headerlink" title="搜索队伍优化4.0"></a>搜索队伍优化4.0</h3><ul>
<li><h5 id="这次优化使用搜索条件搜索的体验"><a href="#这次优化使用搜索条件搜索的体验" class="headerlink" title="这次优化使用搜索条件搜索的体验"></a>这次优化使用搜索条件搜索的体验</h5></li>
<li><h5 id="之前那搜索条件直接挂屏幕上边，很是格格不入，我们把它改成弹窗形式的"><a href="#之前那搜索条件直接挂屏幕上边，很是格格不入，我们把它改成弹窗形式的" class="headerlink" title="之前那搜索条件直接挂屏幕上边，很是格格不入，我们把它改成弹窗形式的"></a>之前那搜索条件直接挂屏幕上边，很是格格不入，我们把它改成弹窗形式的</h5></li>
<li><h5 id="引入组件-Popup-弹出层"><a href="#引入组件-Popup-弹出层" class="headerlink" title="引入组件 Popup 弹出层"></a>引入组件 Popup 弹出层</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 搜索条件圆角弹窗（底部） --&gt;<br> &lt;van-popup<br>   v-model:show=&quot;showBottom&quot;<br>   round<br>   position=&quot;bottom&quot;<br>   :style=&quot;&#123; height: &#x27;50%&#x27; &#125;&quot;<br> &gt;<br> <br> &lt;/van-popup&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="最顶部加个控制弹出的按钮"><a href="#最顶部加个控制弹出的按钮" class="headerlink" title="最顶部加个控制弹出的按钮"></a>最顶部加个控制弹出的按钮</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 筛选按钮 --&gt;<br>&lt;van-button<br>  plain<br>  type=&quot;success&quot;<br>  style=&quot;margin-left: 110px&quot;<br>  @click=&quot;showSearchMenu&quot;<br>  &gt;点此筛选所需队伍&lt;/van-button<br>&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 展示底部搜索条件</span><br><span class="hljs-keyword">const</span> showBottom = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);<br><span class="hljs-comment">// 弹出底部搜索条件弹窗</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">showSearchMenu</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  showBottom.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="再把之前写好的搜索条件表单塞进底部弹出层中（样式、逻辑啥的都不需要改的）"><a href="#再把之前写好的搜索条件表单塞进底部弹出层中（样式、逻辑啥的都不需要改的）" class="headerlink" title="再把之前写好的搜索条件表单塞进底部弹出层中（样式、逻辑啥的都不需要改的）"></a>再把之前写好的搜索条件表单塞进底部弹出层中（样式、逻辑啥的都不需要改的）</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 搜索表单 --&gt;<br>  &lt;van-form @submit=&quot;onSearchTeam&quot;&gt;<br>    &lt;van-cell-group inset&gt;<br>      &lt;van-field<br>        v-model=&quot;searchItem.name&quot;<br>        name=&quot;name&quot;<br>        label=&quot;队伍名&quot;<br>        placeholder=&quot;请输入队伍名&quot;<br>        :rules=&quot;[&#123; message: &#x27;请输入队伍名&#x27; &#125;]&quot;<br>      /&gt;<br><br>      &lt;van-field<br>        v-model=&quot;searchItem.description&quot;<br>        rows=&quot;4&quot;<br>        name=&quot;description&quot;<br>        label=&quot;队伍描述&quot;<br>        type=&quot;textarea&quot;<br>        placeholder=&quot;请输入队伍描述&quot;<br>      /&gt;<br><br>      &lt;van-field<br>        v-model=&quot;searchItem.userId&quot;<br>        name=&quot;userId&quot;<br>        label=&quot;队长id&quot;<br>        placeholder=&quot;请输入队长id&quot;<br>        :rules=&quot;[&#123; message: &#x27;请输入队长id&#x27; &#125;]&quot;<br>      /&gt;<br><br>      &lt;van-field name=&quot;maxNum&quot; label=&quot;最少人数&quot;&gt;<br>        &lt;template #input&gt;<br>          &lt;van-stepper v-model=&quot;searchItem.maxNum&quot; max=&quot;20&quot; min=&quot;2&quot; /&gt;<br>        &lt;/template&gt;<br>      &lt;/van-field&gt;<br>    &lt;/van-cell-group&gt;<br><br>    &lt;div style=&quot;margin: 16px&quot;&gt;<br>      &lt;van-button round block type=&quot;primary&quot; native-type=&quot;submit&quot;&gt;<br>        查询队伍<br>      &lt;/van-button&gt;<br>    &lt;/div&gt;<br>  &lt;/van-form&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="现在使用条件搜索队伍就方便、轻快多了："><a href="#现在使用条件搜索队伍就方便、轻快多了：" class="headerlink" title="现在使用条件搜索队伍就方便、轻快多了："></a>现在使用条件搜索队伍就方便、轻快多了：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230608203846407.png" alt="image-20230608203846407"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230608203904842.png" alt="image-20230608203904842"></p>
<ul>
<li><h5 id="其他小的改动记录："><a href="#其他小的改动记录：" class="headerlink" title="其他小的改动记录："></a>其他小的改动记录：</h5></li>
<li><h5 id="点击查询队伍，关闭底部弹窗"><a href="#点击查询队伍，关闭底部弹窗" class="headerlink" title="点击查询队伍，关闭底部弹窗"></a>点击查询队伍，关闭底部弹窗</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 关闭底部搜索条件弹窗</span><br> showBottom.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="后端对-maxNum-的校验不合格：参数值maxNum为空时报系统错误，浅浅优化一下："><a href="#后端对-maxNum-的校验不合格：参数值maxNum为空时报系统错误，浅浅优化一下：" class="headerlink" title="后端对 maxNum 的校验不合格：参数值maxNum为空时报系统错误，浅浅优化一下："></a>后端对 maxNum 的校验不合格：参数值maxNum为空时报系统错误，浅浅优化一下：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 5.根据最大人数查询</span><br><span class="hljs-type">Integer</span> <span class="hljs-variable">maxNum</span> <span class="hljs-operator">=</span> team.getMaxNum();<br><span class="hljs-keyword">if</span> (maxNum != <span class="hljs-literal">null</span> &amp;&amp; maxNum &gt;= <span class="hljs-number">2</span> &amp;&amp; maxNum &lt;= <span class="hljs-number">20</span>)<br>    tqw.gt(<span class="hljs-string">&quot;max_num&quot;</span>, maxNum - <span class="hljs-number">1</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="标签页上添加-swipeable-属性，可以实现tab标签页之间的平滑切换"><a href="#标签页上添加-swipeable-属性，可以实现tab标签页之间的平滑切换" class="headerlink" title="标签页上添加 swipeable 属性，可以实现tab标签页之间的平滑切换"></a>标签页上添加 swipeable 属性，可以实现tab标签页之间的平滑切换</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 队伍列表分页展示 --&gt;<br>&lt;van-tabs v-model:active=&quot;active&quot; swipeable&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="注意底部弹窗组件的-style-”-height-‘50-’-”-属性，调整其高度至合适位置"><a href="#注意底部弹窗组件的-style-”-height-‘50-’-”-属性，调整其高度至合适位置" class="headerlink" title="注意底部弹窗组件的  :style=”{ height: ‘50%’ }” 属性，调整其高度至合适位置"></a>注意底部弹窗组件的  :style=”{ height: ‘50%’ }” 属性，调整其高度至合适位置</h5></li>
<li><h5 id="分割线样式改成居中且自带好看的样式的了（2023-06-08）"><a href="#分割线样式改成居中且自带好看的样式的了（2023-06-08）" class="headerlink" title="分割线样式改成居中且自带好看的样式的了（2023/06/08）"></a>分割线样式改成居中且自带好看的样式的了（2023/06/08）</h5></li>
</ul>
<h3 id="个人信息页优化"><a href="#个人信息页优化" class="headerlink" title="个人信息页优化"></a>个人信息页优化</h3><ul>
<li><h5 id="用户头像的显示"><a href="#用户头像的显示" class="headerlink" title="用户头像的显示"></a>用户头像的显示</h5></li>
<li><h5 id="表单里加个img标签，设置一下宽高，图片路径url即为用户头像路径"><a href="#表单里加个img标签，设置一下宽高，图片路径url即为用户头像路径" class="headerlink" title="表单里加个img标签，设置一下宽高，图片路径url即为用户头像路径"></a>表单里加个img标签，设置一下宽高，图片路径url即为用户头像路径</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;van-cell<br>      title=&quot;头像&quot;<br>      is-link<br>      to=&quot;/user/edit&quot;<br>      :value=&quot;user.avatarUrl&quot;<br>      @click=&quot;toEdit(&#x27;avatarUrl&#x27;, &#x27;头像&#x27;, user.avatarUrl)&quot;<br>    &gt;<br>      &lt;img :src=&quot;url&quot; alt=&quot;头像&quot; style=&quot;height: 45px&quot; /&gt;<br>    &lt;/van-cell&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 用户头像url</span><br><span class="hljs-keyword">const</span> url = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 用户信息</span><br><span class="hljs-keyword">const</span> user = <span class="hljs-title function_">ref</span>();<br><span class="hljs-comment">// 钩子函数</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-keyword">async</span> () =&gt; &#123;<br>  <span class="hljs-comment">// 发送获取当前登录用户请求</span><br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">res</span>: requestData = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getCurrentUser</span>();<br>    <br>  <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">&quot;获取用户信息成功&quot;</span>);<br>    <span class="hljs-comment">// 获取用户信息</span><br>    user.<span class="hljs-property">value</span> = res.<span class="hljs-property">data</span>;<br>    <span class="hljs-comment">// 获取用户头像url</span><br>    url.<span class="hljs-property">value</span> = res.<span class="hljs-property">data</span>.<span class="hljs-property">avatarUrl</span>;<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">&quot;获取用户信息失败&quot;</span>);<br>  &#125;<br>&#125;);<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="Tabbar标签栏优化"><a href="#Tabbar标签栏优化" class="headerlink" title="Tabbar标签栏优化"></a>Tabbar标签栏优化</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 右侧按钮 --&gt;<br>    &lt;template #right&gt;<br>      &lt;van-icon name=&quot;setting-o&quot; size=&quot;18&quot; /&gt;<br>    &lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 标签页 --&gt;<br> &lt;van-tabbar route&gt;<br>   &lt;van-tabbar-item to=&quot;/&quot; icon=&quot;home-o&quot; name=&quot;index&quot;&gt;主页&lt;/van-tabbar-item&gt;<br>   &lt;van-tabbar-item to=&quot;/team&quot; icon=&quot;paid&quot; name=&quot;team&quot;&gt;队伍 &lt;/van-tabbar-item&gt;<br>   &lt;van-tabbar-item to=&quot;/friend&quot; icon=&quot;friends-o&quot; name=&quot;friend&quot;<br>     &gt;联系人&lt;/van-tabbar-item<br>   &gt;<br>   &lt;van-tabbar-item to=&quot;/user&quot; icon=&quot;user-o&quot; name=&quot;user&quot;&gt;个人&lt;/van-tabbar-item&gt;<br> &lt;/van-tabbar&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="icon-属性里就是图标，在组件-icon-下可以选择合适的"><a href="#icon-属性里就是图标，在组件-icon-下可以选择合适的" class="headerlink" title="icon 属性里就是图标，在组件 icon 下可以选择合适的"></a>icon 属性里就是图标，在组件 icon 下可以选择合适的</h5></li>
</ul>
<h3 id="退出登录"><a href="#退出登录" class="headerlink" title="退出登录"></a>退出登录</h3><ul>
<li><h5 id="补充之前一直未实现的功能：退出登录"><a href="#补充之前一直未实现的功能：退出登录" class="headerlink" title="补充之前一直未实现的功能：退出登录"></a>补充之前一直未实现的功能：退出登录</h5></li>
<li><h5 id="在UserPage-vue下："><a href="#在UserPage-vue下：" class="headerlink" title="在UserPage.vue下："></a>在UserPage.vue下：</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!-- 退出登录 --&gt;<br>  &lt;van-button<br>    plain<br>    type=&quot;danger&quot;<br>    size=&quot;large&quot;<br>    style=&quot;margin-top: 50px&quot;<br>    @click=&quot;logout&quot;<br>    &gt;退出登录&lt;/van-button<br>  &gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="发送退出登录请求"><a href="#发送退出登录请求" class="headerlink" title="发送退出登录请求"></a>发送退出登录请求</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 退出登录</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">logout</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> logout = <span class="hljs-keyword">await</span> myAxios<br>    .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/user/logout&quot;</span>, &#123;&#125;)<br>    <span class="hljs-comment">// 响应</span><br>    .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>      <span class="hljs-comment">// 返回响应数据（用户列表）</span><br>      <span class="hljs-keyword">return</span> response?.<span class="hljs-property">data</span>;<br>    &#125;)<br>    <span class="hljs-comment">// 抛异常</span><br>    .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>    &#125;);<br><br>  <span class="hljs-keyword">if</span> (logout) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(logout);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(logout);<br>    router.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&quot;/user/login&quot;</span>);<br>  &#125;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="后端接口开发（这个用户中心写好的，直接用就行了）"><a href="#后端接口开发（这个用户中心写好的，直接用就行了）" class="headerlink" title="后端接口开发（这个用户中心写好的，直接用就行了）"></a>后端接口开发（这个用户中心写好的，直接用就行了）</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs java">   <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 用户注销</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 注销成功与否(t / f)</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">userLogout</span><span class="hljs-params">(HttpServletRequest request)</span> &#123;<br>        <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> (User) request.getSession().getAttribute(USER_LOGIN_STATE);<br>        <span class="hljs-comment">// 判断对象是否为空</span><br><span class="hljs-comment">//        if (Optional.ofNullable(user).isPresent())</span><br>        <span class="hljs-keyword">if</span> (user == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(NULL_ERROR);<br><br>        <span class="hljs-comment">// 移除session</span><br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;退出登录成功&quot;</span>;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="退出登录功能完成！效果如下："><a href="#退出登录功能完成！效果如下：" class="headerlink" title="退出登录功能完成！效果如下："></a>退出登录功能完成！效果如下：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230611233522701.png" alt="image-20230611233522701"></p>
<h2 id="验证码登录"><a href="#验证码登录" class="headerlink" title="验证码登录"></a>验证码登录</h2><ul>
<li><h5 id="基本实现验证码登录功能了，后端校验业务逻辑不够严谨，前端页面也有待改善（2023-06-11晚）"><a href="#基本实现验证码登录功能了，后端校验业务逻辑不够严谨，前端页面也有待改善（2023-06-11晚）" class="headerlink" title="基本实现验证码登录功能了，后端校验业务逻辑不够严谨，前端页面也有待改善（2023/06/11晚）"></a>基本实现验证码登录功能了，后端校验业务逻辑不够严谨，前端页面也有待改善（2023/06/11晚）</h5></li>
</ul>
<h3 id="前端开发-1"><a href="#前端开发-1" class="headerlink" title="前端开发"></a>前端开发</h3><ul>
<li><h5 id="pages-index下新增CodeLogin-vue页面"><a href="#pages-index下新增CodeLogin-vue页面" class="headerlink" title="pages/index下新增CodeLogin.vue页面"></a>pages/index下新增CodeLogin.vue页面</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;van-cell-group inset&gt;<br>    &lt;van-field<br>      v-model=&quot;phoneNumber&quot;<br>      name=&quot;手机号&quot;<br>      label=&quot;手机号&quot;<br>      placeholder=&quot;请填写手机号&quot;<br>      :rules=&quot;[&#123; required: true, message: &#x27;请填写手机号&#x27; &#125;]&quot;<br>    /&gt;<br><br>    &lt;van-field<br>      v-model=&quot;code&quot;<br>      name=&quot;验证码&quot;<br>      placeholder=&quot;请填写验证码&quot;<br>      :rules=&quot;[&#123; required: true, message: &#x27;请填写验证码&#x27; &#125;]&quot;<br>    /&gt;<br><br>    &lt;van-button plain type=&quot;primary&quot; @click=&quot;getCode&quot;&gt;发送验证码&lt;/van-button&gt;<br>  &lt;/van-cell-group&gt;<br><br>  &lt;div style=&quot;margin: 16px&quot;&gt;<br>    &lt;van-button<br>      round<br>      block<br>      type=&quot;primary&quot;<br>      native-type=&quot;submit&quot;<br>      @click=&quot;codeLogin&quot;<br>    &gt;<br>      登录<br>    &lt;/van-button&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; showSuccessToast, showFailToast &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; requestData &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../../models/user&quot;</span>;<br><br><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br><span class="hljs-comment">// 电话号码</span><br><span class="hljs-keyword">const</span> phoneNumber = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 填写的验证码</span><br><span class="hljs-keyword">const</span> code = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 收到的验证码</span><br><span class="hljs-keyword">const</span> rightCode = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><br><span class="hljs-comment">// 直接获取验证码</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">getCode</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">res</span>: requestData = <span class="hljs-keyword">await</span> myAxios.<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/getCode&quot;</span>, &#123;<br>    <span class="hljs-attr">params</span>: &#123;<br>      <span class="hljs-attr">phoneNumber</span>: phoneNumber.<span class="hljs-property">value</span>,<br>    &#125;,<br>  &#125;);<br><br>  <span class="hljs-keyword">if</span> (res.<span class="hljs-property">code</span> === <span class="hljs-number">0</span> &amp;&amp; res.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-comment">//获取验证码</span><br>    rightCode.<span class="hljs-property">value</span> = res.<span class="hljs-property">data</span>;<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">&quot;获取验证码失败&quot;</span>);<br>  &#125;<br>&#125;;<br><br><span class="hljs-comment">// 发送短信验证码</span><br><br><span class="hljs-comment">// 验证码登录</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">codeLogin</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">res</span>: requestData = <span class="hljs-keyword">await</span> myAxios.<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/user/codeLogin&quot;</span>, &#123;<br>    <span class="hljs-attr">params</span>: &#123;<br>      <span class="hljs-attr">phoneNumber</span>: phoneNumber.<span class="hljs-property">value</span>,<br>      <span class="hljs-attr">code</span>: code.<span class="hljs-property">value</span>,<br>      <span class="hljs-attr">rightCode</span>: rightCode.<span class="hljs-property">value</span>,<br>    &#125;,<br>  &#125;);<br><br>  <span class="hljs-comment">// 登录成功，跳转至主页</span><br>  <span class="hljs-keyword">if</span> (res.<span class="hljs-property">code</span> === <span class="hljs-number">0</span> &amp;&amp; res.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">&quot;登录成功&quot;</span>);<br>    router.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&quot;/&quot;</span>);<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">&quot;登录失败&quot;</span>);<br>  &#125;<br>&#125;;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="添加路由"><a href="#添加路由" class="headerlink" title="添加路由"></a>添加路由</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 1. 定义路由组件.</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">IndexPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/index/IndexPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">SearchPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/SearchPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserEditPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserEditPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserListPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserListPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserLoginPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserLoginPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamEditPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamEditPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamAddPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamAddPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamListPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamListPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">FriendPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/friend/FriendPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> codeLoginPage <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/index/CodeLoginPage.vue&quot;</span>;<br><br><span class="hljs-comment">// 2. 定义一些路由</span><br><span class="hljs-comment">// 每个路由都需要映射到一个组件</span><br><span class="hljs-comment">// 我们后面再讨论嵌套路由</span><br><span class="hljs-keyword">const</span> routes = [<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;主页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">IndexPage</span> &#125;, <span class="hljs-comment">// 主页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/code/login&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;验证码登录&quot;</span>, <span class="hljs-attr">component</span>: codeLoginPage &#125;, <span class="hljs-comment">// 验证码登录页</span><br><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;个人信息页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserPage</span> &#125;, <span class="hljs-comment">// 个人页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/search&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户搜索页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">SearchPage</span> &#125;, <span class="hljs-comment">// 搜索页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/edit&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户编辑页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserEditPage</span> &#125;, <span class="hljs-comment">// 用户信息修改页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/list&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户列表页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserListPage</span> &#125;, <span class="hljs-comment">// 用户列表页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/login&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;登录页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserLoginPage</span> &#125;, <span class="hljs-comment">// 用户登录页</span><br><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍信息页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamPage</span> &#125;, <span class="hljs-comment">// 队伍页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team/edit&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍编辑&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamEditPage</span> &#125;, <span class="hljs-comment">// 队伍修改页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team/add&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍新增页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamAddPage</span> &#125;, <span class="hljs-comment">// 队伍修改页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team/list&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍列表页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamListPage</span> &#125;, <span class="hljs-comment">// 队伍列表页</span><br><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/friend&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户列表页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">FriendPage</span> &#125;, <span class="hljs-comment">// 队伍列表页</span><br>];<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> routes;<br></code></pre></td></tr></table></figure>

<h2 id="阶段性问题-12"><a href="#阶段性问题-12" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="妈的，用post请求发送以params请求行发送请求，能打到后端，但接收参数为null，再复习下post-get传参方式"><a href="#妈的，用post请求发送以params请求行发送请求，能打到后端，但接收参数为null，再复习下post-get传参方式" class="headerlink" title="妈的，用post请求发送以params请求行发送请求，能打到后端，但接收参数为null，再复习下post/get传参方式"></a>妈的，用post请求发送以params请求行发送请求，能打到后端，但接收参数为null，再复习下post/get传参方式</h5></li>
</ul>
<h3 id="后端开发-1"><a href="#后端开发-1" class="headerlink" title="后端开发"></a>后端开发</h3><ul>
<li><h5 id="实现验证码登录分两步：1、获取验证码-2、验证码登录"><a href="#实现验证码登录分两步：1、获取验证码-2、验证码登录" class="headerlink" title="实现验证码登录分两步：1、获取验证码   2、验证码登录"></a>实现验证码登录分两步：1、获取验证码   2、验证码登录</h5></li>
<li><h5 id="先增加两个工具类：1、生成随机验证码-2、发送短信验证码"><a href="#先增加两个工具类：1、生成随机验证码-2、发送短信验证码" class="headerlink" title="先增加两个工具类：1、生成随机验证码  2、发送短信验证码"></a>先增加两个工具类：1、生成随机验证码  2、发送短信验证码</h5></li>
<li><h5 id="生成随机验证码"><a href="#生成随机验证码" class="headerlink" title="生成随机验证码"></a>生成随机验证码</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 随机生成验证码工具类</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ValidateCodeUtils</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 随机生成验证码</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> length 长度为4位或者6位</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 验证码</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> Integer <span class="hljs-title function_">generateValidateCode</span><span class="hljs-params">(<span class="hljs-type">int</span> length)</span>&#123;<br>        <span class="hljs-type">Integer</span> <span class="hljs-variable">code</span> <span class="hljs-operator">=</span><span class="hljs-literal">null</span>;<br>        <span class="hljs-keyword">if</span>(length == <span class="hljs-number">4</span>)&#123;<br>            code = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Random</span>().nextInt(<span class="hljs-number">9999</span>);<span class="hljs-comment">//生成随机数，最大为9999</span><br>            <span class="hljs-keyword">if</span>(code &lt; <span class="hljs-number">1000</span>)&#123;<br>                code = code + <span class="hljs-number">1000</span>;<span class="hljs-comment">//保证随机数为4位数字</span><br>            &#125;<br>        &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(length == <span class="hljs-number">6</span>)&#123;<br>            code = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Random</span>().nextInt(<span class="hljs-number">999999</span>);<span class="hljs-comment">//生成随机数，最大为999999</span><br>            <span class="hljs-keyword">if</span>(code &lt; <span class="hljs-number">100000</span>)&#123;<br>                code = code + <span class="hljs-number">100000</span>;<span class="hljs-comment">//保证随机数为6位数字</span><br>            &#125;<br>        &#125;<span class="hljs-keyword">else</span>&#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">RuntimeException</span>(<span class="hljs-string">&quot;只能生成4位或6位数字验证码&quot;</span>);<br>        &#125;<br>        <span class="hljs-keyword">return</span> code;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 随机生成指定长度字符串验证码</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> length 长度</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> String <span class="hljs-title function_">generateValidateCode4String</span><span class="hljs-params">(<span class="hljs-type">int</span> length)</span>&#123;<br>        <span class="hljs-type">Random</span> <span class="hljs-variable">rdm</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Random</span>();<br>        <span class="hljs-type">String</span> <span class="hljs-variable">hash1</span> <span class="hljs-operator">=</span> Integer.toHexString(rdm.nextInt());<br>        <span class="hljs-type">String</span> <span class="hljs-variable">capstr</span> <span class="hljs-operator">=</span> hash1.substring(<span class="hljs-number">0</span>, length);<br>        <span class="hljs-keyword">return</span> capstr;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="发送短信验证码"><a href="#发送短信验证码" class="headerlink" title="发送短信验证码"></a>发送短信验证码</h5></li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs xml"><br><span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>com.aliyun<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>aliyun-java-sdk-core<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>4.5.16<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>com.aliyun<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>aliyun-java-sdk-dysmsapi<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>2.1.0<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 短信发送工具类</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SMSUtils</span> &#123;<br><br>	<span class="hljs-comment">/**</span><br><span class="hljs-comment">	 * 发送短信</span><br><span class="hljs-comment">	 * <span class="hljs-doctag">@param</span> signName 签名</span><br><span class="hljs-comment">	 * <span class="hljs-doctag">@param</span> templateCode 模板</span><br><span class="hljs-comment">	 * <span class="hljs-doctag">@param</span> phoneNumbers 手机号</span><br><span class="hljs-comment">	 * <span class="hljs-doctag">@param</span> param 参数</span><br><span class="hljs-comment">	 */</span><br>	<span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">sendMessage</span><span class="hljs-params">(String signName, String templateCode,String phoneNumbers,String param)</span>&#123;<br>		<span class="hljs-type">DefaultProfile</span> <span class="hljs-variable">profile</span> <span class="hljs-operator">=</span> DefaultProfile.getProfile(<span class="hljs-string">&quot;cn-hangzhou&quot;</span>, <span class="hljs-string">&quot;&quot;</span>, <span class="hljs-string">&quot;&quot;</span>);<br>		<span class="hljs-type">IAcsClient</span> <span class="hljs-variable">client</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">DefaultAcsClient</span>(profile);<br><br>		<span class="hljs-type">SendSmsRequest</span> <span class="hljs-variable">request</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">SendSmsRequest</span>();<br>		request.setSysRegionId(<span class="hljs-string">&quot;cn-hangzhou&quot;</span>);<br>		request.setPhoneNumbers(phoneNumbers);<br>		request.setSignName(signName);<br>		request.setTemplateCode(templateCode);<br>		request.setTemplateParam(<span class="hljs-string">&quot;&#123;\&quot;code\&quot;:\&quot;&quot;</span>+param+<span class="hljs-string">&quot;\&quot;&#125;&quot;</span>);<br>		<span class="hljs-keyword">try</span> &#123;<br>			<span class="hljs-type">SendSmsResponse</span> <span class="hljs-variable">response</span> <span class="hljs-operator">=</span> client.getAcsResponse(request);<br>			System.out.println(<span class="hljs-string">&quot;短信发送成功&quot;</span>);<br>		&#125;<span class="hljs-keyword">catch</span> (ClientException e) &#123;<br>			e.printStackTrace();<br>		&#125;<br>	&#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="直接获取验证码-controller层"><a href="#直接获取验证码-controller层" class="headerlink" title="直接获取验证码 controller层"></a>直接获取验证码 controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 直接获取验证码</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> phoneNumber 电话号码</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 验证码</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@GetMapping(&quot;/getCode&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">getCode</span><span class="hljs-params">(String phoneNumber)</span> &#123;<br>       <span class="hljs-comment">//controller对参数的校验</span><br>       <span class="hljs-keyword">if</span> (StringUtils.isAnyBlank(phoneNumber))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR);<br><br>       <span class="hljs-type">String</span> <span class="hljs-variable">code</span> <span class="hljs-operator">=</span> userService.getCode(phoneNumber);<br>       <span class="hljs-keyword">return</span> ResultUtils.success(code);<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="service层-8"><a href="#service层-8" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">  * 获取验证码</span><br><span class="hljs-comment">  *</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@param</span> phoneNumber 电话号码</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@return</span> 验证码</span><br><span class="hljs-comment">  */</span><br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getCode</span><span class="hljs-params">(String phoneNumber)</span> &#123;<br>     <span class="hljs-comment">// 1.校验电话号码</span><br>     <span class="hljs-type">String</span> <span class="hljs-variable">pattern</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;1\\d&#123;10&#125;&quot;</span>;<br>     <span class="hljs-keyword">if</span> (StringUtils.isBlank(phoneNumber) || !Pattern.matches(pattern, phoneNumber))<br>         <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR, <span class="hljs-string">&quot;电话号码有误&quot;</span>);<br>     <span class="hljs-comment">// 2.判断该用户是否已注册</span><br>     QueryWrapper&lt;User&gt; uqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>     uqw.eq(<span class="hljs-string">&quot;phone&quot;</span>, phoneNumber);<br>     <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> getOne(uqw);<br>     <span class="hljs-comment">// 3.未注册</span><br>     <span class="hljs-keyword">if</span> (user == <span class="hljs-literal">null</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(NOT_REGISTER);<br>     <span class="hljs-comment">// 4.已注册 随机生成4位验证码并返回</span><br>     <span class="hljs-keyword">return</span> ValidateCodeUtils.generateValidateCode(<span class="hljs-number">4</span>).toString();<br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里还提供了阿里云短信服务，通过发送短信来接收验证码"><a href="#这里还提供了阿里云短信服务，通过发送短信来接收验证码" class="headerlink" title="这里还提供了阿里云短信服务，通过发送短信来接收验证码"></a>这里还提供了阿里云短信服务，通过发送短信来接收验证码</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 发送短信验证码</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> phoneNumber 手机号</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request     request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 短信验证码发送成功</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@PostMapping(&quot;/sendMsg&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;String&gt; <span class="hljs-title function_">sendMsg</span><span class="hljs-params">(String phoneNumber, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-comment">// 1.校验手机号</span><br>       <span class="hljs-keyword">if</span> (StringUtils.isEmpty(phoneNumber))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR);<br>       <span class="hljs-comment">// 2.生成随机的4位验证码</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">code</span> <span class="hljs-operator">=</span> ValidateCodeUtils.generateValidateCode(<span class="hljs-number">4</span>).toString();<br>       <span class="hljs-comment">// 3.调用阿里云提供的短信服务API完成发送短信</span><br>       SMSUtils.sendMessage(<span class="hljs-string">&quot;伙伴匹配&quot;</span>, <span class="hljs-string">&quot;&quot;</span>, phoneNumber, code);<br>       <span class="hljs-comment">// 4.需要将生成的验证码保存到Session</span><br>       request.getSession().setAttribute(phoneNumber, code);<br>       <span class="hljs-comment">// 5.短信发送成功</span><br>       <span class="hljs-keyword">return</span> ResultUtils.success(<span class="hljs-string">&quot;短信验证码发送成功!&quot;</span>);<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="验证码登录-controller层"><a href="#验证码登录-controller层" class="headerlink" title="验证码登录 controller层"></a>验证码登录 controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 验证码登录</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> phoneNumber 电话号码</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> code        验证码</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 脱敏用户信息</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@GetMapping(&quot;/codeLogin&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;User&gt; <span class="hljs-title function_">codeLogin</span><span class="hljs-params">(String phoneNumber, String code, String rightCode, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">//controller对参数的校验</span><br>        <span class="hljs-keyword">if</span> (StringUtils.isAnyBlank(phoneNumber, code, rightCode))<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR);<br><br>        <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> userService.codeLogin(phoneNumber, code, rightCode, request);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(user);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="service层-9"><a href="#service层-9" class="headerlink" title="service层"></a>service层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 验证码登录</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> phoneNumber 电话号码</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> code        验证码</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 脱敏用户信息</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> User <span class="hljs-title function_">codeLogin</span><span class="hljs-params">(String phoneNumber, String code, String rightCode, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// 1.校验验证码</span><br>        <span class="hljs-keyword">if</span> (!code.equals(rightCode)) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(CODE_ERROR);<br><br>        <span class="hljs-comment">// 2.校验电话号码</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">pattern</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;1\\d&#123;10&#125;&quot;</span>;<br>        <span class="hljs-keyword">if</span> (StringUtils.isBlank(phoneNumber) || !Pattern.matches(pattern, phoneNumber))<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR, <span class="hljs-string">&quot;电话号码有误&quot;</span>);<br><br>        <span class="hljs-comment">// 3.获取用户信息</span><br>        QueryWrapper&lt;User&gt; qw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>        qw.eq(<span class="hljs-string">&quot;phone&quot;</span>, phoneNumber);<br>        <span class="hljs-type">User</span> <span class="hljs-variable">one</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.getOne(qw);<br>        <span class="hljs-keyword">if</span> (one == <span class="hljs-literal">null</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(UPDATE_ERROR);<br><br>        <span class="hljs-comment">// 4.脱敏用户信息</span><br>        <span class="hljs-type">User</span> <span class="hljs-variable">safetyUser</span> <span class="hljs-operator">=</span> getSafetyUser(one);<br><br>        <span class="hljs-comment">// 5.记录用户登录态</span><br>        request.getSession().setAttribute(USER_LOGIN_STATE, safetyUser);<br><br>        <span class="hljs-comment">// 6.返回脱敏用户信息</span><br>        <span class="hljs-keyword">return</span> safetyUser;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="验证码登录功能基本实现！效果如下：（2023-06-12午）"><a href="#验证码登录功能基本实现！效果如下：（2023-06-12午）" class="headerlink" title="验证码登录功能基本实现！效果如下：（2023/06/12午）"></a>验证码登录功能基本实现！效果如下：（2023/06/12午）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230612114804354.png" alt="image-20230612114804354"></p>
<h2 id="注册功能"><a href="#注册功能" class="headerlink" title="注册功能"></a>注册功能</h2><h3 id="前端开发-2"><a href="#前端开发-2" class="headerlink" title="前端开发"></a>前端开发</h3><ul>
<li><h5 id="pages-UserRegisterPage-vue下"><a href="#pages-UserRegisterPage-vue下" class="headerlink" title="pages/UserRegisterPage.vue下"></a>pages/UserRegisterPage.vue下</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;van-form @submit=&quot;onSubmit&quot;&gt;<br>    &lt;van-cell-group inset&gt;<br>      &lt;van-field<br>        v-model=&quot;userAccount&quot;<br>        name=&quot;用户名&quot;<br>        label=&quot;用户名&quot;<br>        placeholder=&quot;用户名&quot;<br>        :rules=&quot;[&#123; required: true, message: &#x27;请填写用户名&#x27; &#125;]&quot;<br>      /&gt;<br><br>      &lt;van-field<br>        v-model=&quot;userPassword&quot;<br>        type=&quot;password&quot;<br>        name=&quot;密码&quot;<br>        label=&quot;密码&quot;<br>        placeholder=&quot;密码&quot;<br>        :rules=&quot;[&#123; required: true, message: &#x27;请填写密码&#x27; &#125;]&quot;<br>      /&gt;<br><br>      &lt;van-field<br>        v-model=&quot;checkPassword&quot;<br>        type=&quot;password&quot;<br>        name=&quot;确认密码&quot;<br>        label=&quot;确认密码&quot;<br>        placeholder=&quot;确认密码&quot;<br>        :rules=&quot;[&#123; required: true, message: &#x27;请再次填写密码&#x27; &#125;]&quot;<br>      /&gt;<br><br>      &lt;van-field<br>        v-model=&quot;planetCode&quot;<br>        name=&quot;星球编号&quot;<br>        label=&quot;星球编号&quot;<br>        placeholder=&quot; 星球编号&quot;<br>        :rules=&quot;[&#123; required: true, message: &#x27;请填写星球编号&#x27; &#125;]&quot;<br>      /&gt;<br>    &lt;/van-cell-group&gt;<br><br>    &lt;div style=&quot;margin: 16px&quot;&gt;<br>      &lt;van-button round block type=&quot;primary&quot; native-type=&quot;submit&quot;&gt;<br>        注册<br>      &lt;/van-button&gt;<br>    &lt;/div&gt;<br>  &lt;/van-form&gt;<br>&lt;/template&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs typescript">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123; ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> myAxios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../../plugins/myAxios&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; useRouter &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; showSuccessToast, showFailToast &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> &#123; requestData &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../../models/user&quot;</span>;<br><br><span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>();<br><span class="hljs-comment">// 用户名</span><br><span class="hljs-keyword">const</span> userAccount = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 密码</span><br><span class="hljs-keyword">const</span> userPassword = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 确认密码</span><br><span class="hljs-keyword">const</span> checkPassword = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-comment">// 星球编号</span><br><span class="hljs-keyword">const</span> planetCode = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onSubmit</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">const</span> <span class="hljs-attr">res</span>: requestData = <span class="hljs-keyword">await</span> myAxios.<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/user/register&quot;</span>, &#123;<br>    <span class="hljs-attr">userAccount</span>: userAccount.<span class="hljs-property">value</span>,<br>    <span class="hljs-attr">userPassword</span>: userPassword.<span class="hljs-property">value</span>,<br>    <span class="hljs-attr">checkPassword</span>: checkPassword.<span class="hljs-property">value</span>,<br>    <span class="hljs-attr">planetCode</span>: planetCode.<span class="hljs-property">value</span>,<br>  &#125;);<br><br>  <span class="hljs-keyword">if</span> (res.<span class="hljs-property">code</span> === <span class="hljs-number">0</span> &amp;&amp; res.<span class="hljs-property">data</span>) &#123;<br>    <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">&quot;注册成功&quot;</span>);<br>    router.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&quot;/user/login&quot;</span>);<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">&quot;注册失败&quot;</span>);<br>  &#125;<br>&#125;;<br><br><span class="hljs-comment">// 跳转至验证码登录页</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">toCodeLogin</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  router.<span class="hljs-title function_">push</span>(<span class="hljs-string">&quot;/code/login&quot;</span>);<br>&#125;;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="config-route-ts-下添加路由"><a href="#config-route-ts-下添加路由" class="headerlink" title="config/route.ts 下添加路由"></a>config/route.ts 下添加路由</h5></li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-comment">// 1. 定义路由组件.</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">IndexPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/index/IndexPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">SearchPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/SearchPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserEditPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserEditPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserListPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserListPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserLoginPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/user/UserLoginPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamEditPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamEditPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamAddPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamAddPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">TeamListPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/team/TeamListPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">FriendPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/friend/FriendPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">CodeLoginPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/index/CodeLoginPage.vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserRegisterPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../pages/index/UserRegisterPage.vue&quot;</span>;<br><br><span class="hljs-comment">// 2. 定义一些路由</span><br><span class="hljs-comment">// 每个路由都需要映射到一个组件</span><br><span class="hljs-comment">// 我们后面再讨论嵌套路由</span><br><span class="hljs-keyword">const</span> routes = [<br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;主页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">IndexPage</span> &#125;, <span class="hljs-comment">// 主页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/code/login&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;验证码登录&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">CodeLoginPage</span> &#125;, <span class="hljs-comment">// 验证码登录页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/register&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;新用户注册&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserRegisterPage</span> &#125;, <span class="hljs-comment">// 验证码登录页</span><br><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;个人信息页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserPage</span> &#125;, <span class="hljs-comment">// 个人页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/search&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户搜索页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">SearchPage</span> &#125;, <span class="hljs-comment">// 搜索页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/edit&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户编辑页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserEditPage</span> &#125;, <span class="hljs-comment">// 用户信息修改页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/list&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户列表页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserListPage</span> &#125;, <span class="hljs-comment">// 用户列表页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/user/login&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;登录页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">UserLoginPage</span> &#125;, <span class="hljs-comment">// 用户登录页</span><br><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍信息页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamPage</span> &#125;, <span class="hljs-comment">// 队伍页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team/edit&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍编辑&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamEditPage</span> &#125;, <span class="hljs-comment">// 队伍修改页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team/add&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍新增页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamAddPage</span> &#125;, <span class="hljs-comment">// 队伍修改页</span><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/team/list&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;队伍列表页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">TeamListPage</span> &#125;, <span class="hljs-comment">// 队伍列表页</span><br><br>  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/friend&quot;</span>, <span class="hljs-attr">title</span>: <span class="hljs-string">&quot;用户列表页&quot;</span>, <span class="hljs-attr">component</span>: <span class="hljs-title class_">FriendPage</span> &#125;, <span class="hljs-comment">// 队伍列表页</span><br>];<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> routes;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="注意：注册后的跳转页面"><a href="#注意：注册后的跳转页面" class="headerlink" title="注意：注册后的跳转页面"></a>注意：注册后的跳转页面</h5></li>
<li><h5 id="其他修改：登录后的显示信息"><a href="#其他修改：登录后的显示信息" class="headerlink" title="其他修改：登录后的显示信息"></a>其他修改：登录后的显示信息</h5></li>
<li><h5 id="So-easy"><a href="#So-easy" class="headerlink" title="So easy!"></a>So easy!</h5></li>
</ul>
<h3 id="后端开发-2"><a href="#后端开发-2" class="headerlink" title="后端开发"></a>后端开发</h3><ul>
<li><h5 id="用户中心就做过了：controller层"><a href="#用户中心就做过了：controller层" class="headerlink" title="用户中心就做过了：controller层"></a>用户中心就做过了：controller层</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 用户注册</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> userRegisterRequest 注册用户信息</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> id</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@PostMapping(&quot;/register&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;Long&gt; <span class="hljs-title function_">userRegister</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> UserRegister userRegisterRequest)</span> &#123;<br>       <span class="hljs-comment">//controller对参数的校验</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">userAccount</span> <span class="hljs-operator">=</span> userRegisterRequest.getUserAccount();<br>       <span class="hljs-type">String</span> <span class="hljs-variable">userPassword</span> <span class="hljs-operator">=</span> userRegisterRequest.getUserPassword();<br>       <span class="hljs-type">String</span> <span class="hljs-variable">checkPassword</span> <span class="hljs-operator">=</span> userRegisterRequest.getCheckPassword();<br>       <span class="hljs-type">String</span> <span class="hljs-variable">planetCode</span> <span class="hljs-operator">=</span> userRegisterRequest.getPlanetCode();<br>       <span class="hljs-keyword">if</span> (StringUtils.isAnyBlank(userAccount, userPassword, checkPassword, planetCode))<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR);<br><br>       <span class="hljs-type">long</span> <span class="hljs-variable">userRegister</span> <span class="hljs-operator">=</span> userService.userRegister(userAccount, userPassword, checkPassword, planetCode);<br>       <span class="hljs-keyword">return</span> ResultUtils.success(userRegister);<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="service层："><a href="#service层：" class="headerlink" title="service层："></a>service层：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">  * 用户注册</span><br><span class="hljs-comment">  *</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@param</span> userAccount   账户</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@param</span> userPassword  密码</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@param</span> checkPassword 二次密码</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@return</span> 用户id</span><br><span class="hljs-comment">  */</span><br> <span class="hljs-meta">@Override</span><br> <span class="hljs-keyword">public</span> <span class="hljs-type">long</span> <span class="hljs-title function_">userRegister</span><span class="hljs-params">(String userAccount, String userPassword, String checkPassword, String planetCode)</span> &#123;<br>     <span class="hljs-comment">// 1.校验</span><br>     <span class="hljs-comment">// 1.1.账户, 密码, 二次密码不能为空</span><br>     <span class="hljs-keyword">if</span> (StringUtils.isAnyBlank(userAccount, userPassword, checkPassword)) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(PARMS_ERROR);<br><br>     <span class="hljs-comment">// 1.2.账户不小于4位</span><br>     <span class="hljs-keyword">if</span> (userAccount.length() &lt; <span class="hljs-number">4</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">&quot;账户不符合要求&quot;</span>, <span class="hljs-number">50000</span>, <span class="hljs-string">&quot;账户小于4位&quot;</span>);<br><br>     <span class="hljs-comment">// 1.3.账户不包含特殊字符</span><br>     <span class="hljs-type">String</span> <span class="hljs-variable">pattern</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;.*[\\s`~!@#$%^&amp;*()+=|&#123;&#125;&#x27;:;&#x27;,\\[\\].&lt;&gt;/?~！@#￥%……&amp;*（）——+|&#123;&#125;【】‘；：”“’。，、？\\\\]+.*&quot;</span>;<br>     <span class="hljs-keyword">if</span> (Pattern.matches(pattern, userAccount)) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">&quot;账户不符合要求&quot;</span>, <span class="hljs-number">50001</span>, <span class="hljs-string">&quot;账户包含特殊字符&quot;</span>);<br><br>     <span class="hljs-comment">// 1.4.用户密码不小于8位</span><br>     <span class="hljs-keyword">if</span> (userPassword.length() &lt; <span class="hljs-number">8</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">&quot;密码不符合要求&quot;</span>, <span class="hljs-number">60000</span>, <span class="hljs-string">&quot;用户密码小于8位&quot;</span>);<br><br>     <span class="hljs-comment">// 1.5.二次密码与密码相同</span><br>     <span class="hljs-keyword">if</span> (!userPassword.equals(checkPassword)) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">&quot;二次密码不符合要求&quot;</span>, <span class="hljs-number">60001</span>, <span class="hljs-string">&quot;二次密码与密码不相同&quot;</span>);<br><br>     <span class="hljs-comment">// 1.6.星球编号不能超过5位</span><br>     <span class="hljs-keyword">if</span> (planetCode.length() &gt; <span class="hljs-number">5</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">&quot;星球编号不符合要求&quot;</span>, <span class="hljs-number">60002</span>, <span class="hljs-string">&quot;星球编号超过5位&quot;</span>);<br><br>     <span class="hljs-comment">// 1.7.账户不能重复</span><br>     QueryWrapper&lt;User&gt; ua_lqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;(); <span class="hljs-comment">// LambdaQueryWrapper&lt;User&gt; userLambdaQueryWrapper = new LambdaQueryWrapper&lt;&gt;();</span><br>     ua_lqw.eq(<span class="hljs-string">&quot;user_account&quot;</span>, userAccount); <span class="hljs-comment">// userLambdaQueryWrapper.eq(User::getUserAccount, userAccount);</span><br>     <span class="hljs-type">Long</span> <span class="hljs-variable">ua_count</span> <span class="hljs-operator">=</span> userMapper.selectCount(ua_lqw);   <span class="hljs-comment">// long count = this.count(lqw);</span><br>     <span class="hljs-keyword">if</span> (ua_count &gt; <span class="hljs-number">0</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">&quot;账户不符合要求&quot;</span>, <span class="hljs-number">50002</span>, <span class="hljs-string">&quot;账户重复&quot;</span>);<br><br>     <span class="hljs-comment">// 1.8.星球编号不能重复</span><br>     QueryWrapper&lt;User&gt; pc_lqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>     pc_lqw.eq(<span class="hljs-string">&quot;planet_code&quot;</span>, planetCode);<br>     <span class="hljs-type">Long</span> <span class="hljs-variable">pc_count</span> <span class="hljs-operator">=</span> userMapper.selectCount(pc_lqw);<br>     <span class="hljs-keyword">if</span> (pc_count &gt; <span class="hljs-number">0</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(<span class="hljs-string">&quot;星球编号不符合要求&quot;</span>, <span class="hljs-number">60003</span>, <span class="hljs-string">&quot;星球编号重复&quot;</span>);<br><br>     <span class="hljs-comment">// 2.对密码进行加密</span><br>     <span class="hljs-type">String</span> <span class="hljs-variable">encryptPassword</span> <span class="hljs-operator">=</span> DigestUtils.md5DigestAsHex((SALT + userPassword).getBytes());<br><br>     <span class="hljs-comment">// 3.向数据库中插入用户数据</span><br>     <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>();<br>     <span class="hljs-comment">//</span><br>     user.setUserAccount(userAccount);<br>     user.setUserPassword(encryptPassword);<br>     user.setPlanetCode(planetCode);<br>     <span class="hljs-type">boolean</span> <span class="hljs-variable">save</span> <span class="hljs-operator">=</span> <span class="hljs-built_in">this</span>.save(user);<br>     <span class="hljs-comment">//插入失败</span><br>     <span class="hljs-keyword">if</span> (!save) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.UPDATE_ERROR);<br><br>     <span class="hljs-keyword">return</span> user.getId();<br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="测试一下，完成！（2023-06-14晚）"><a href="#测试一下，完成！（2023-06-14晚）" class="headerlink" title="测试一下，完成！（2023/06/14晚）"></a>测试一下，完成！（2023/06/14晚）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230614225016567.png" alt="image-20230614225016567"></p>
<h2 id="阶段性问题-13"><a href="#阶段性问题-13" class="headerlink" title="阶段性问题"></a>阶段性问题</h2><ul>
<li><h5 id="这里发现由于新用户没有已加入的队伍，在筛选队伍的后端逻辑校验时，排除自己已加入的队伍"><a href="#这里发现由于新用户没有已加入的队伍，在筛选队伍的后端逻辑校验时，排除自己已加入的队伍" class="headerlink" title="这里发现由于新用户没有已加入的队伍，在筛选队伍的后端逻辑校验时，排除自己已加入的队伍"></a>这里发现由于新用户没有已加入的队伍，在筛选队伍的后端逻辑校验时，排除自己已加入的队伍</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 6.排除当前用户已加入的队伍</span><br>       QueryWrapper&lt;UserTeam&gt; utqw = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>       <span class="hljs-comment">// 6.1.查询当前用户已加入的队伍信息(为提高性能, 仅拿取需要的team_id字段即可)</span><br>       utqw.select(<span class="hljs-string">&quot;team_id&quot;</span>).eq(<span class="hljs-string">&quot;user_id&quot;</span>, loginUser.getId());<br>       List&lt;UserTeam&gt; userTeamList = userTeamService.list(utqw);<br>       <span class="hljs-comment">// 6.2.队伍列表排除掉用户已加入的队伍</span><br>       <span class="hljs-keyword">if</span> (!CollectionUtils.isEmpty(userTeamList)) &#123;<br>           List&lt;Long&gt; teamIdList = userTeamList.stream().map(UserTeam::getTeamId).collect(Collectors.toList());<br>           tqw.notIn(<span class="hljs-string">&quot;id&quot;</span>, teamIdList);<br>       &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="要判断userTeamList不为空才能进行stream流操作，否则会报错，已修正（2023-06-14晚）"><a href="#要判断userTeamList不为空才能进行stream流操作，否则会报错，已修正（2023-06-14晚）" class="headerlink" title="要判断userTeamList不为空才能进行stream流操作，否则会报错，已修正（2023/06/14晚）"></a>要判断userTeamList不为空才能进行stream流操作，否则会报错，已修正（2023/06/14晚）</h5></li>
</ul>
<h2 id="思考-4"><a href="#思考-4" class="headerlink" title="思考"></a>思考</h2><ul>
<li><h5 id="浅浅记录一下，由于英语四六级和临近期末，伙伴匹配系统暂时开发。"><a href="#浅浅记录一下，由于英语四六级和临近期末，伙伴匹配系统暂时开发。" class="headerlink" title="浅浅记录一下，由于英语四六级和临近期末，伙伴匹配系统暂时开发。"></a>浅浅记录一下，由于英语四六级和临近期末，伙伴匹配系统暂时开发。</h5></li>
<li><h5 id="但基础功能已经完备，这几天也正在了解云服务器领域的知识，为将来的项目的顺利部署打点基础，也要准备接下来项目的学习：API接口开放平台、微服务搜索、BI智能平台（2023-06-26午）"><a href="#但基础功能已经完备，这几天也正在了解云服务器领域的知识，为将来的项目的顺利部署打点基础，也要准备接下来项目的学习：API接口开放平台、微服务搜索、BI智能平台（2023-06-26午）" class="headerlink" title="但基础功能已经完备，这几天也正在了解云服务器领域的知识，为将来的项目的顺利部署打点基础，也要准备接下来项目的学习：API接口开放平台、微服务搜索、BI智能平台（2023/06/26午）"></a>但基础功能已经完备，这几天也正在了解云服务器领域的知识，为将来的项目的顺利部署打点基础，也要准备接下来项目的学习：API接口开放平台、微服务搜索、BI智能平台（2023/06/26午）</h5></li>
<li><h5 id="今天是个大喜的日子，Memory-伙伴匹配成功部署上线：http-120-55-62-195-7071-（2023-07-29晚）"><a href="#今天是个大喜的日子，Memory-伙伴匹配成功部署上线：http-120-55-62-195-7071-（2023-07-29晚）" class="headerlink" title="今天是个大喜的日子，Memory-伙伴匹配成功部署上线：http://120.55.62.195:7071/#/（2023/07/29晚）"></a>今天是个大喜的日子，Memory-伙伴匹配成功部署上线：<a target="_blank" rel="noopener" href="http://120.55.62.195:7071/#/%EF%BC%882023/07/29%E6%99%9A%EF%BC%89">http://120.55.62.195:7071/#/（2023/07/29晚）</a></h5></li>
</ul>
<h3 id="轮播图"><a href="#轮播图" class="headerlink" title="轮播图"></a>轮播图</h3><ul>
<li><h5 id="这功能简直不要太简单，加个组件，放两张图片不就搞定了"><a href="#这功能简直不要太简单，加个组件，放两张图片不就搞定了" class="headerlink" title="这功能简直不要太简单，加个组件，放两张图片不就搞定了"></a>这功能简直不要太简单，加个组件，放两张图片不就搞定了</h5></li>
<li><h5 id="一个多月前，就已经有这个想法了，不过我想放几张我喜欢的图片，但存储在Gitee图床的图片好像有跨域处理，外界访问不到"><a href="#一个多月前，就已经有这个想法了，不过我想放几张我喜欢的图片，但存储在Gitee图床的图片好像有跨域处理，外界访问不到" class="headerlink" title="一个多月前，就已经有这个想法了，不过我想放几张我喜欢的图片，但存储在Gitee图床的图片好像有跨域处理，外界访问不到"></a>一个多月前，就已经有这个想法了，不过我想放几张我喜欢的图片，但存储在Gitee图床的图片好像有跨域处理，外界访问不到</h5></li>
<li><h5 id="于是这个想法就被搁置了"><a href="#于是这个想法就被搁置了" class="headerlink" title="于是这个想法就被搁置了"></a>于是这个想法就被搁置了</h5></li>
<li><h5 id="不过我开通了七牛云对象存储服务，当我的免费图床hhh"><a href="#不过我开通了七牛云对象存储服务，当我的免费图床hhh" class="headerlink" title="不过我开通了七牛云对象存储服务，当我的免费图床hhh"></a>不过我开通了七牛云对象存储服务，当我的免费图床hhh</h5></li>
<li><h5 id="以下是轮播图的具体代码：-2023-07-31早"><a href="#以下是轮播图的具体代码：-2023-07-31早" class="headerlink" title="以下是轮播图的具体代码：(2023/07/31早)"></a>以下是轮播图的具体代码：(2023/07/31早)</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">// 轮播图片</span><br><span class="hljs-keyword">const</span> images = [<br>  <span class="hljs-string">&quot;http://ry2s7czdf.hd-bkt.clouddn.com/imgs/wallpaper/girl4.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;http://ry2s7czdf.hd-bkt.clouddn.com/imgs/wallpaper/girl3.jpg&quot;</span>,<br>];<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;!-- 首页轮播图 --&gt;<br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">van-swipe</span> <span class="hljs-attr">:autoplay</span>=<span class="hljs-string">&quot;3000&quot;</span> <span class="hljs-attr">lazy-render</span> <span class="hljs-attr">:width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">:height</span>=<span class="hljs-string">&quot;300&quot;</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;<span class="hljs-name">van-swipe-item</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;image in images&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;image&quot;</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">&quot;image&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> /&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-item</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe</span>&gt;</span></span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="效果如下："><a href="#效果如下：" class="headerlink" title="效果如下："></a>效果如下：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230731094458270.png" alt="image-20230731094458270"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230731094503317.png" alt="image-20230731094503317"></p>
<h3 id="搜索用户优化"><a href="#搜索用户优化" class="headerlink" title="搜索用户优化"></a>搜索用户优化</h3><h1 id="TODO"><a href="#TODO" class="headerlink" title="TODO"></a>TODO</h1><ul>
<li><h5 id="新老值一样，无需修改-减少查询数据库"><a href="#新老值一样，无需修改-减少查询数据库" class="headerlink" title="新老值一样，无需修改(减少查询数据库)"></a>新老值一样，无需修改(减少查询数据库)</h5></li>
<li><h5 id="根据队长id查询队伍——-gt-根据队长姓名？（这个也可以不改的，可以把用户星球编号设置为队员id编号）"><a href="#根据队长id查询队伍——-gt-根据队长姓名？（这个也可以不改的，可以把用户星球编号设置为队员id编号）" class="headerlink" title="根据队长id查询队伍——&gt;根据队长姓名？（这个也可以不改的，可以把用户星球编号设置为队员id编号）"></a>根据队长id查询队伍——&gt;根据队长姓名？（这个也可以不改的，可以把用户星球编号设置为队员id编号）</h5></li>
<li><h5 id="校验老三样：校验登录、校验用户（存在？权限？封号？）、校验队伍（存在？状态？）（√）"><a href="#校验老三样：校验登录、校验用户（存在？权限？封号？）、校验队伍（存在？状态？）（√）" class="headerlink" title="校验老三样：校验登录、校验用户（存在？权限？封号？）、校验队伍（存在？状态？）（√）"></a>校验老三样：校验登录、校验用户（存在？权限？封号？）、校验队伍（存在？状态？）（√）</h5></li>
<li><h5 id="退出队伍，校验该用户是否为该队伍成员"><a href="#退出队伍，校验该用户是否为该队伍成员" class="headerlink" title="退出队伍，校验该用户是否为该队伍成员"></a>退出队伍，校验该用户是否为该队伍成员</h5></li>
<li><h5 id="解散加密队伍必须输入密码"><a href="#解散加密队伍必须输入密码" class="headerlink" title="解散加密队伍必须输入密码"></a>解散加密队伍必须输入密码</h5></li>
<li><h5 id="获取当前用户创建的队伍（√）"><a href="#获取当前用户创建的队伍（√）" class="headerlink" title="获取当前用户创建的队伍（√）"></a>获取当前用户创建的队伍（√）</h5></li>
<li><h5 id="获取当前用户加入的队伍（√）"><a href="#获取当前用户加入的队伍（√）" class="headerlink" title="获取当前用户加入的队伍（√）"></a>获取当前用户加入的队伍（√）</h5></li>
<li><h5 id="分页查询用户信息的脱敏"><a href="#分页查询用户信息的脱敏" class="headerlink" title="分页查询用户信息的脱敏"></a>分页查询用户信息的脱敏</h5></li>
<li><h5 id="分页查询队伍信息的脱敏"><a href="#分页查询队伍信息的脱敏" class="headerlink" title="分页查询队伍信息的脱敏"></a>分页查询队伍信息的脱敏</h5></li>
<li><h5 id="代码封装性不好，好多重复代码"><a href="#代码封装性不好，好多重复代码" class="headerlink" title="代码封装性不好，好多重复代码"></a>代码封装性不好，好多重复代码</h5></li>
<li><h5 id="代码思路很清晰，但有些许不整洁"><a href="#代码思路很清晰，但有些许不整洁" class="headerlink" title="代码思路很清晰，但有些许不整洁"></a>代码思路很清晰，但有些许不整洁</h5></li>
<li><h5 id="user-team表join-time冗余字段-（收回这个问题，create-time与业务无关，不能替代join-time）"><a href="#user-team表join-time冗余字段-（收回这个问题，create-time与业务无关，不能替代join-time）" class="headerlink" title="user_team表join_time冗余字段 （收回这个问题，create_time与业务无关，不能替代join_time）"></a>user_team表join_time冗余字段 （收回这个问题，create_time与业务无关，不能替代join_time）</h5></li>
<li><h5 id="createTime、expireTime、updateTime传到前端显示不正常（√）"><a href="#createTime、expireTime、updateTime传到前端显示不正常（√）" class="headerlink" title="createTime、expireTime、updateTime传到前端显示不正常（√）"></a>createTime、expireTime、updateTime传到前端显示不正常（√）</h5></li>
<li><h5 id="前端的pages、models等目录杂乱了，需要分包管理"><a href="#前端的pages、models等目录杂乱了，需要分包管理" class="headerlink" title="前端的pages、models等目录杂乱了，需要分包管理"></a>前端的pages、models等目录杂乱了，需要分包管理</h5></li>
<li><h5 id="前端关于页面跳转的问题，router-push-、router-replace-的使用"><a href="#前端关于页面跳转的问题，router-push-、router-replace-的使用" class="headerlink" title="前端关于页面跳转的问题，router.push()、router.replace()的使用"></a>前端关于页面跳转的问题，router.push()、router.replace()的使用</h5></li>
<li><h5 id="axios请求的返回值：response、response-data（√）"><a href="#axios请求的返回值：response、response-data（√）" class="headerlink" title="axios请求的返回值：response、response.data（√）"></a>axios请求的返回值：response、response.data（√）</h5></li>
<li><h5 id="修改队伍还要扩展支持修改最大人数"><a href="#修改队伍还要扩展支持修改最大人数" class="headerlink" title="修改队伍还要扩展支持修改最大人数"></a>修改队伍还要扩展支持修改最大人数</h5></li>
<li><h5 id="获取队伍信息team-one我直接返回team了，没有脱敏，其实密码加密就行"><a href="#获取队伍信息team-one我直接返回team了，没有脱敏，其实密码加密就行" class="headerlink" title="获取队伍信息team/one我直接返回team了，没有脱敏，其实密码加密就行"></a>获取队伍信息team/one我直接返回team了，没有脱敏，其实密码加密就行</h5></li>
<li><h5 id="根据标签搜索用户、根据队伍名、队伍描述等搜索队伍需要优化（√）"><a href="#根据标签搜索用户、根据队伍名、队伍描述等搜索队伍需要优化（√）" class="headerlink" title="根据标签搜索用户、根据队伍名、队伍描述等搜索队伍需要优化（√）"></a>根据标签搜索用户、根据队伍名、队伍描述等搜索队伍需要优化（√）</h5></li>
<li><h5 id="前端页面的标题-对应每个页面都应该显示对应的标题（√）"><a href="#前端页面的标题-对应每个页面都应该显示对应的标题（√）" class="headerlink" title="前端页面的标题 对应每个页面都应该显示对应的标题（√）"></a>前端页面的标题 对应每个页面都应该显示对应的标题（√）</h5></li>
<li><h5 id="登录后页面跳转到原先页"><a href="#登录后页面跳转到原先页" class="headerlink" title="登录后页面跳转到原先页"></a>登录后页面跳转到原先页</h5></li>
<li><h5 id="搜索队伍分为公开和加密两栏，私有队伍不对外显示（√）"><a href="#搜索队伍分为公开和加密两栏，私有队伍不对外显示（√）" class="headerlink" title="搜索队伍分为公开和加密两栏，私有队伍不对外显示（√）"></a>搜索队伍分为公开和加密两栏，私有队伍不对外显示（√）</h5></li>
<li><h5 id="加入队伍功能，加入加密队伍需要输入密码（√）"><a href="#加入队伍功能，加入加密队伍需要输入密码（√）" class="headerlink" title="加入队伍功能，加入加密队伍需要输入密码（√）"></a>加入队伍功能，加入加密队伍需要输入密码（√）</h5></li>
<li><h5 id="分布式锁防止单用户加入两次队伍"><a href="#分布式锁防止单用户加入两次队伍" class="headerlink" title="分布式锁防止单用户加入两次队伍"></a>分布式锁防止单用户加入两次队伍</h5></li>
<li><h5 id="项目打包上线"><a href="#项目打包上线" class="headerlink" title="项目打包上线"></a>项目打包上线</h5></li>
<li><h5 id="拿到加入队伍的所有队员的信息"><a href="#拿到加入队伍的所有队员的信息" class="headerlink" title="拿到加入队伍的所有队员的信息"></a>拿到加入队伍的所有队员的信息</h5></li>
<li><h5 id="前台的提示信息不够完善，比如登录时的用户名、密码校验提示，电话号码、验证码校验提示，新增、删除、加入队伍提示等等"><a href="#前台的提示信息不够完善，比如登录时的用户名、密码校验提示，电话号码、验证码校验提示，新增、删除、加入队伍提示等等" class="headerlink" title="前台的提示信息不够完善，比如登录时的用户名、密码校验提示，电话号码、验证码校验提示，新增、删除、加入队伍提示等等"></a>前台的提示信息不够完善，比如登录时的用户名、密码校验提示，电话号码、验证码校验提示，新增、删除、加入队伍提示等等</h5></li>
<li><h5 id="支持用户上传头像"><a href="#支持用户上传头像" class="headerlink" title="支持用户上传头像"></a>支持用户上传头像</h5></li>
</ul>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/Redis/" class="category-chain-item">Redis</a>
  
  
    <span>></span>
    
  <a href="/categories/Redis/%E9%A1%B9%E7%9B%AE/" class="category-chain-item">项目</a>
  
  
    <span>></span>
    
  <a href="/categories/Redis/%E9%A1%B9%E7%9B%AE/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/" class="category-chain-item">开发经验</a>
  
  

  

  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/%E9%A1%B9%E7%9B%AE/">#项目</a>
      
        <a href="/tags/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/">#开发经验</a>
      
        <a href="/tags/Redis/">#Redis</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>Memory 伙伴匹配系统-开发文档</div>
      <div>http://example.com/2023/03/24/Memory 伙伴匹配系统-开发文档/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Memory</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年3月24日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2023年9月20日</div>
        </div>
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2023/04/09/Java%E6%B3%9B%E5%9E%8B%E7%9A%84%E7%90%86%E8%A7%A3/" title="Java泛型：赋予灵活性的利器">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">Java泛型：赋予灵活性的利器</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2023/03/23/%E6%8E%A2%E7%B4%A2%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2%E4%B8%96%E7%95%8C%20-%20%E4%B8%AA%E4%BA%BA%E5%AF%BC%E8%AF%BB/" title="探索我的博客世界 - 个人导读">
                        <span class="hidden-mobile">探索我的博客世界 - 个人导读</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  
  
    <article id="comments">
      

    </article>
  


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>Memory | 个人文档站点</span> </a>
<i class="iconfont icon-love"></i> <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>配置指南 | Hexo Fluid 用户手册</span> </a>   
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="leancloud-site-pv-container" style="display: none">
        总访问量 
        <span id="leancloud-site-pv"></span>
         次
      </span>
    
    
      <span id="leancloud-site-uv-container" style="display: none">
        总访客数 
        <span id="leancloud-site-uv"></span>
         人
      </span>
    
    

  
</div>

  
  
    <!-- 备案信息 ICP for China -->
    <div class="beian">
  <span>
    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
      京ICP证123456号
    </a>
  </span>
  
    
      <span>
        <a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
          rel="nofollow noopener"
          class="beian-police"
          target="_blank"
        >
          
            <span style="visibility: hidden; width: 0">|</span>
            <img src="/img/police_beian.png" alt="police-icon"/>
          
          <span>京公网安备12345678号</span>
        </a>
      </span>
    
  
</div>

  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>







  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>

  <script defer src="/js/leancloud.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
